在数组的映射过程中，将剩余的数组对象从一个组件转移到另一个组件。

Question

我在response中有一个对象阵列，我想把这些对象映射到response中的第一个组件上，但是当阵列大小完成时，我把第一个组件的高度固定为300px，我想把剩余的对象转移到第二个组件上，并把剩余的对象映射到第二个组件上，请帮助我。

let arrayOfObjects = [{title: "karim"}, {title:"fawad"},{title: "karim"}, {title:"fawad"},{title: "karim"}, {title:"fawad"},{title: "karim"}, {title:"fawad"}];

let firstComponent = <div height="300px">
arrayOfObjects.map(e)=><div height="100px">{e.title}</div>
</div>;

let secountComponent = <div height="300px"></div>

Answer 1

你就不能在使用map之前先计算一下你要从数组中选择的对象数量，然后再使用slice吗？因此，与其使用

arrayOfObjects.map(e)=><div height="100px">{e.title}</div>

这样做

arrayOfObjects.slice(0,3).map(e)=><div height="100px">{e.title}</div>

然后再使用slice将剩余的数据放在一个单独的组件中。

arrayOfObjects.slice(3).map(e)=><div height="100px">{e.title}</div>

你甚至可以用程序计算出slice的值，用第一个组件高度的值代替3，除以每个标题的高度。

对了，我觉得你需要把map函数放在大括号{}里，JSX才能正确渲染，否则它只会打印你函数的文本。

Answer 2

你可以把一个数组切成片，然后把每个子列表分别放在不同的组件中。

--编辑

由于项目的高度可能不同，需要采用不同的方法。

也就是说，只要项目的高度总和不超过指定的值，就应该将项目分成几块。

例子

let arrayOfObjects = [{
  title: "karim"
}, {
  title: "fawad"
}, {
  title: "karim"
}, {
  title: "fawad"
}, {
  title: "karim"
}, {
  title: "fawad"
}, {
  title: "karim"
}, {
  title: "fawad"
}];

const random = (from, to) => Math.floor(Math.random() * (to - from) + from);

const randomStyle = () => {
  
  return {
    height: random(70, 130),
    background: `rgb(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)})`
  }
}

arrayOfObjects = arrayOfObjects.map(pr => ({...pr, style: randomStyle()}));

const FixedComponent = ({height, items}) => {
  const computedHeight = `${height}px`;

  return <div className="fixed" style={{height: computedHeight}}>
   {items.map(({title, style}, id) => <div className="item" key={id} style={style}>{title}</div>)}
   </div>
}

const App = () => {
  const [items, setItems] = React.useState([]);
  
  React.useEffect(() => {
    setItems(arrayOfObjects);
  },[]);

  const renderComponents = function*() {
    
    let bucket = [];
    let sumOfHeights = 0;
    const maxHeight = 300;
    let id = 1;
    
    for(let item of items) {
      
      const height = item.style.height;
      
      if(maxHeight > sumOfHeights + height) {
        bucket = [...bucket, item];
        sumOfHeights = sumOfHeights + height;
        continue;
      }
      
      const items = [...bucket];
      yield (<FixedComponent key={id} height={maxHeight} items={items}></FixedComponent>);
      bucket = [];
      id = id + 1;
      sumOfHeights = 0;
    }
    
    id = id + 1;
    
    yield (<FixedComponent key={id} height={maxHeight} items={bucket}></FixedComponent>);
  }

  return <div>
    {[...renderComponents()]}
  </div>
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

html, body {
  margin: 0;
  box-sizing: border-box;
}

.fixed {
  padding: .5rem;
  border: 1px solid black;
}

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.7/polyfill.js"></script>
<div id="root"></div>