Question

我正在为表创建一个可重用的组件，我在控制台中面临警告： -

validateDOMNesting(...): #text cannot appear as a child of <tr>.

以下是示例代码： -

这是render方法，我们正在检查对象的值，如果json然后使可链接的行成为简单的文本。

return (
   <div className="table-responsive" id={self.props.tableId}>
       <table id="table3"className="table table-bordered">
           <tbody>
              {
                 this.isJson(self.props.columns.labels[0]) ?
                     (this.props.records.map((record, index) => {
                         return self.makeLink( record, index)
                     })) : (this.props.records.map((record, index) => {
                         return ( <tr key = { index } > {
                             self.props.columns.labels.map((label, index) => {
                                 return ( <td key = { index } > { self.renderTableData(index, record) } </td>)
                             })
                         } </tr> )
                     }))
             }

           </tbody>
       </table>
   </div>                          
   );

makeLink功能： -

  makeLink(record, index){
    var self = this;
    return (
       <tr key={index} onClick={this.redirect.bind(this,record._id)} >
       {this.props.columns.labels.map((label, index) =>{
           return (
              <td key={index}>{self.renderTableData(index,record)}</td>
            )
       })}
   </tr> 
 )
}

提前致谢

Answer 1

正如错误所述，您无法直接在<tr>内找到文字，您必须将其放在<th>或<td>内。

<table>
  <tbody>
    <tr>
      <td>...</td>
    </tr>
  </tbody>
</table>

validateDOMNesting（...）：＃text不能作为孩子出现

1 个答案: