javascript - 将 react 组件数组映射为两个元素的组

Question

我有一个文本输入数组，例如

var A = [<TextInput ... />, <TextInput ... />, ....]

我想将这些元素按行内的两个元素分组进行映射。即每两个 <TextInput />包裹在 <Row> 内我该如何实现这个。我想要这样的输出

<Row>
   <TextInput ... />
   <TextInput ... />
</Row>
<Row>
   <TextInput ... />
   <TextInput ... />
</Row>
<Row>
   <TextInput ... />
   <TextInput ... />
</Row>
....
....

我在循环内尝试了这段代码，但它产生了错误。

{index % 2 === 0 && <Row> }
      <TextInput {...props} />
{index % 2 === 1 ? </Row>}

我认为我们无法返回 </Row> 的结束标签仅在 jsx 内

Answer 1

var A = [ < TextInput .../>, <TextInput ... / >,...]

    let arrTwoComp = [],
        arrComp = [];
    A.forEach((oneComp, key) => {

        arrTwoComp.push(oneComp);

        if ((key + 1) % 2 === 0) {
            arrComp.push(
                <Row>{arrTwoComp}</Row>
            );
            arrTwoComp = [];
        }
    })


    //display arrComp

    <div>{arrComp}</div>