首页 文章

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

提问于
浏览
5

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

3 回答

  • 0

    使用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>
    )
    
  • 1

    你能尝试如下,

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

  • 8

    我已经遇到过几次,只需执行以下操作:我希望尽可能多地保留“返回”的逻辑 . 只是一个偏好 .

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

相关问题