javascript - 如何连接 Prop

Question

假设我必须将 div 和 Prop 分开。我需要将 Prop 传播到两个单独的 div。给定函数:

function Collection(props) {
   const coll = props.coll
   const coll_list = coll.map((coll, index) => {
      return (
         <span key={index}>{coll}</span>
      )
   })

   return (
      <div className="main_div">
         <div className="div_a">
            {coll_list}
         </div>
         <div className="div_b">
            {coll_list}
         </div>
      </div>
   )
}

结果应该是这样的:

<div className="main_div">
   <div className="div_a">
      <span>item_1</span>
      <span>item_2</span>
      <span>item_3</span>
   </div>
   <div className="div_b">
      <span>item_4</span>
      <span>item_5</span>
      <span>item_6</span>
   </div>
</div>

我会很感激所有的答案。谢谢。

Answer 1

如果你只需要拆分为 2 个列表，那么你可以找到中间并将数组拆分为 2 个部分:

function Collection(props) {
   const coll = props.coll.map((coll, index) => (<span key={index}>{coll}</span>));
   const middle = Math.floor(coll.length / 2);
   const coll_list_a = coll.slice(0, middle);
   const coll_list_b = coll.slice(middle, coll.length);

   return (
      <div className="main_div">
         <div className="div_a">
            {coll_list_a}
         </div>
         <div className="div_b">
            {coll_list_b}
         </div>
      </div>
   )
}

如果您想要一个更健壮的解决方案来拆分为长度为 n 的部分，您可以将数组切成 block 并动态创建列表:

function chunkify(arr, n){
    let index = 0;
    const len = arr.length;
    const chunks = [];

    for (index = 0; index < len; index += n) {
        chunks.push(arr.slice(index, index + n));
    }

    return chunks;
}

function Collection(props) {
   const coll = props.coll.map((coll, index) => (<span key={index}>{coll}</span>));
   const chunks = chunkify(coll)

   return (
      <div className="main_div">
         {
            chunks.map((list, index) => (
               <div key={index} className={"div_" + index}>
                  {list}
               </div>
            ))
         }
      </div>
   )
}