使用ReactJS和concat JSX语法进行渲染时映射功能循环

Question

一个非常简单的问题，当我在渲染数组时循环使用.map函数进行响应时，说：

render() {
        let board = this.props.board;

        return (
            <div>
                 {
                   board.map((piece,index) => {
                       return (
                           <Piece data={piece}/>
                       );
                   })
                 }
            </div>
        );
    }

我正在尝试每5件添加一个换行符，所以(index % 5 == 0)在<Piece />之前添加<br />
当我尝试用+代替或做这样的事情时：

board.map((piece,index) => {
      return (
                (index % 5 == 0) ? <br /> : ''
                <Piece data={piece}/>
             );
})

我得到[Object object]的矩阵的输出

Answer 1

如果条件成立，则返回[ <br />, <Piece> ]的数组，否则仅返回Piece组件。 看到小提琴。

相关的代码段是这样的：

return <div>{items.map(function (i, index) {
    if (index % 5 === 0) {
        return [ <br key={index + "break"} />, <Item key={index} num={i} /> ];
    }

    return <Item key={index} num={i} />;
})}</div>;

同样，将key放在从map返回的组件map或者以其他方式返回类似数组的实例。 这样，React不需要取出所有生成的组件并在每个渲染器上替换它们，而只需在键下找到它们并更新其属性即可。 查看React文档中的对帐以了解更多信息。