Question

我有以下代码是react.js，这是一个错误

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

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>
    );    
  }  
});

Answer 1

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

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

尝试

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

Answer 2

你可以尝试如下，

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

错误是因为地图正在尝试返回两个td元素。这可能是错误的原因

Answer 3

我已经碰过了几次，只需要执行以下操作：我希望保持尽可能多的逻辑而不是＆＃34;返回＆＃34;尽可能。只是一个偏好。

var TestRecords = React.createClass({    

      render: function() {
         var trDisplay = this.props.records.map((record, idx)=>{
                                return(
                                  <tr key={idx}>
                                   <td>{record.title}</td><td>{record.id}</td>
                                   </tr>
                                    }
                        )}

                return(
                      <table>
                           {trDisplay}
                    </table>
                 );    
               }  
       });

React.js错误“相邻的JSX元素必须包装在一个封闭的标记中”

3 个答案: