React: validateDOMNesting: #text не может отображаться как дочерний элемент <tr>

Можете ли вы объяснить мне, почему реагировать на предупреждение Warning: validateDOMNesting(...): #text cannot appear as a child of <tr>. See Router > RouterContext > CarWashPage > AllCarWashTable > tr > #text.? Я не вижу текст внутри тега tr

Код, который отображает таблицу

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

В конце моя таблица имеет следующую структуру

Где проблема?

Ответы

Ответ 1

Проблема заключается в пробелах в этой строке:

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

Это может показаться глупым, но вы на самом деле визуализируете ячейки и некоторые пробелы (т.е. текст). Он должен выглядеть следующим образом:

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

Ответ 2

Это также происходит при использовании логического И короткого замыкания && для отображения/скрытия условных строк:

{
  foo && (<tr><td>{foo}</td></tr>)
}

изменить его на тройной a? b: c Форма a? b: c где c равно null, исправит это

{
  foo ? (<tr><td>{foo}</td></tr>) : null
}

Ответ 3

В моем случае, где был пустой '' вывод (без пробела внутри)

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

Нуль делает трюк:

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

Ответ 4

Принятый ответ не был коренной причиной в моем случае. Я получил такое же предупреждение, когда у меня был комментарий после <th>. Предупреждение исчезло, когда я удалил комментарий.

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

РЕДАКТИРОВАТЬ: удаление пробела между </th> и {/* также добьется цели.

Ответ 5

Предупреждение об уведомлении: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <tbody>. Убедитесь, что у вас нет лишних пробелов между тегами в каждой строке исходного кода. В моем случае переменная инициализации не должна быть null.

 let elementCart = ''; {/* in the here,warning will append  */}
    if(productsCart.length > 0){
        elementCart = productsCart.map((item, index) => {
            return <CartItem item={item} key={index} index={index} />
        });
    }

    return(
        <tbody id="my-cart-body">
            {elementCart}
        </tbody>
    )

Решение: let elementCart = null;

Ответ 6

Если кто-то еще сталкивался с этой ошибкой или схожей ошибкой пробелов в пользовательском интерфейсе материалов в React, моим решением после нескольких часов взлома моего кода был простой комментарий javascript внутри моей таблицы.

 { /*  sortable here */ }

Я удалил это из моих элементов таблицы, и предупреждение исчезло.

Ответ 7

В дополнение к ответу @Jarno я также столкнулся с этой проблемой. Дважды проверьте, что у вас нет дополнительных } или { в конце кода javascript:

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

Ответ 8

Я получил это предупреждение, когда у меня была скобка вместо фигурной скобки

<table>
  <tbody>
    <tr>
      (showMsg && <td>Hi</td>} // leading '(' should be a '{'
    </td>
  </tbody>
</table>

Ответ 9

Я получил это предупреждение, когда помещал текст внутри элемента <tr> без элементов <td>. Я завернул свой текст элементами <td>, и предупреждение исчезло.

Когда я это делал, наличие пробела в тексте или использование {} не имело значения.