validateDOMNesting (...): #text kann nicht als Kind erscheint von <tr>

Question

Ich bin eine wiederverwendbare Komponente für Tabelle erstellen, und ich bin die Warnung in der Konsole gegenüber, ist: -

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

Hier ist die Probe code: -

Dies ist die render-Methode, in der wir den Wert des Objekts überprüfen, wenn json dann die verknüpfbare Zeile sonst einfach Text machen.

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-Funktion: -

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

Vielen Dank im Voraus

Answer 1

So wie der Fehler sagt, Sie Text nicht direkt in <tr> haben können, haben Sie es setzen in einem <th> oder <td>.

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