使用ReactJS和concat JSX语法进行渲染时的map函数循环

Question

非常简单的问题,当我在渲染时通过数组循环与.map函数反应,说:

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

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

我正在尝试每5件添加一个断行,所以 在我尝试连接或者做这样的事情之前(index % 5 == 0)添加:<br /><Piece />
+

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

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

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或返回类似数组的实例的其他方式.这样,React不需要取出所有生成的组件并在每次渲染时替换它们,但可以在键下找到它们并更新它们的属性.查看React文档中的对帐以了解详情.