Reakcja: validateDOMNesting: #text nie może pojawić się jako dziecko: <tr>

Question

Czy możesz mi wyjaśnić, dlaczego reaguje ostrzeżeniem na pokazywanie Warning: validateDOMNesting(...): #text cannot appear as a child of <tr>. See Router > RouterContext > CarWashPage > AllCarWashTable > tr > #text.? Nie widzę żadnego tekstu wewnątrz znacznika tr

kod, który renderuje stół

export default class AllCarWashTable extends React.Component{ 

constructor(props) { 
    super(props); 
    this.generateHeaders = this.generateHeaders.bind(this); 
    this.generateRows = this.generateRows.bind(this); 
}; 

static propTypes = { 
    cols : React.PropTypes.array.isRequired, 
    rows : React.PropTypes.array.isRequired 
} 

generateHeaders() { 
    let cols = this.props.cols; // [{key, label}] 
    return cols.map(function(colData) { 
     return <th key={colData.key}> {colData.label} </th>; 
    }); 
} 

generateRows() { 
    let cols = this.props.cols, // [{key, label}] 
     data = this.props.rows; 
    if (this.props.rows.length > 0) { 
     return data.map(function(item) { 
      var cells = cols.map(function(colData) { 
       return <td key={colData.key}> {item[colData.key]} </td>; 
      }); 
      return <tr key={item.id}> {cells} </tr>; 
     }); 
    } 
} 

render(){ 
    let headers = this.generateHeaders(); 
    let rows = this.generateRows(); 

    return (
     <table className="table table-hove"> 
      <thead> 
       <tr> 
        {headers} 
       </tr> 
      </thead> 
      <tbody> 
        {rows} 
      </tbody> 

     </table> 
    ) 
} 
} 

Na koniec moja tabela ma następującą strukturę

Gdzie jest problem?

Answer 1

Problemem jest to, że obowiązuje w tym wierszu:

return <tr key={item.id}> {cells} </tr>; 

To może wydawać się głupie, ale jesteś rzeczywiście renderowania komórki i jakieś odstępy (czyli tekst). Powinno to wyglądać następująco:

return <tr key={item.id}>{cells}</tr>; 

Answer 2

Przyjęta odpowiedź nie była główną przyczyną w moim przypadku. Otrzymałem to samo ostrzeżenie, gdy miałem komentarz po tagu <th>. Ostrzeżenie zniknęło, gdy usunąłem komentarz.

const TableHeaders = (props) => (
    <tr> 
     <th>ID</th> {/* TODO: I had a comment like this */} 
    </tr> 
) 

EDIT: usuwanie przestrzeń pomiędzy i {/ * będzie również rade

Answer 3

Oprócz @ Jarno za odpowiedź, ja też wpadł tej kwestii, jak również. Sprawdź dwa razy, że nie masz żadnych dodatkowych } lub { na końcu kodu javascript:

{this.props.headers.map(header => <th key={header}>{header}</th>)}} 
                    ↑ 

Answer 4

W moim przypadku była pusta „” Wyjście (w \ o przestrzeni wewnątrz):

<tbody>{this.props.orders.map(
      order =>this.props.selectedAgent === order.agent ? 
      <Row item={order} key={ order._id } /> : '' 
     )} 
</tbody> 

zerowy rade:

<tbody>{this.props.orders.map(
      order =>this.props.selectedAgent === order.agent ? 
      <Row item={order} key={ order._id } /> : null 
     )} 
</tbody>