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

React.js Error "Adjacent JSX elements must be wrapped in an enclosing tag"

本文关键字：一个 封装 错误 js JSX 元素 React      更新时间：2023-09-26

我有下面的代码是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>
    );    
  }  
});

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

这里提供了两个节点（两个td）。您需要将它们封装在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>
)

你能试试下面的方法吗，

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元素。这可能是错误的原因

我已经遇到过几次了，只需执行以下操作：我喜欢在"return"中保留尽可能多的逻辑。只是一种偏好。

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>
                 );    
               }  
       });
相关文章：