React.js错误“相邻的JSX元素必须包装在一个封闭的标记中” [英] React.js Error "Adjacent JSX elements must be wrapped in an enclosing tag"

问题描述

我有以下代码是react.js，这是抛出错误

I have the below code is react.js which is throwing an error

相邻的JSX元素必须包装在一个封闭的标签中。看起来React并不接受彼此相邻的相同标签如何显示表格数据？

"Adjacent JSX elements must be wrapped in an enclosing tag". It looks like React isnt accepting same tags next to each other how do I display tabular data?

var TestRecords = React.createClass({    
  render: function() {
      return(
        <table>
          <tr>
            {this.props.records.map(record=>{
              return <td>{record.title}</td><td>record.id</td>
            }
          )}
        </tr>
      </table>
    );    
  }  
});

推荐答案

使用React，你可能只提供两件事组件树 - 节点（元素）或节点集合。

With React, you may only provide two things to a component tree - a node (element) or a collection of nodes.

这里提供两个节点（两个 td S）。您需要将它们包装在 tr 中，或者将它们作为数组返回（使用 key 属性）。在这个例子中也不太理想，因为看起来您的生成器可能首先应该包含 tr 。

Here you're providing two nodes (two tds). You need to either wrap them in a tr, or return them as an array (with key attributes). Also less ideal in this example since it appears that your generator should probably include tr in the first place.

尝试

return (
  <table>
    {this.props.records.map(record => ( // implicit return
      <tr key={record.id}>
        <td>{record.title}</td>
        <td>{record.id}</td>
      </tr>
    )}
  </table>
)

这篇关于React.js错误“相邻的JSX元素必须包装在一个封闭的标记中”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！