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

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

我已经遇到过几次了，只需做以下几件事：我喜欢尽可能多地保留“返回”的逻辑。只是一种偏好。

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

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

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

Answer 3

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

这里提供了两个节点（两个tds）。您需要将它们包装在tr中，或者将它们作为数组返回（使用键属性）。在本例中也不太理想，因为您的生成器似乎首先应该包括tr。

尝试

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