使用 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) 在 <Piece />
之前添加 <br /> 当我尝试与 + 连接或做这样的事情时：

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

我得到 [Object object] 的

矩阵的输出

Answer 1

如果条件成立，

Return [ <br />, <Piece> ] 数组，否则 return 只是 Piece 组件。 See the fiddle.

相关代码是这样的：

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 放在 return 来自 map 的组件上或 return 类数组实例的其他方式。这样，React 就不需要在每次渲染时取出所有生成的组件并替换它们，而只需在键下找到它们并更新它们的属性即可。查看 React 文档中的 Reconciliation 以了解更多信息。

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

map function loop when rendering with ReactJS and concat JSX syntax

javascript

loops

reactjs

react-jsx