web-dev-qa-db-ja.com

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

最後に、私のテーブルは次の構造を持っています

enter image description here

問題はどこにありますか？

reactjswarnings
21
Bizon4ik

問題はこの行のスペースです：

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

馬鹿げているように見えるかもしれませんが、実際にはセルをレンダリングしていますおよびいくつかの空白（つまりテキスト）。次のようになります。

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

これは、論理AND短絡&&を使用して条件付き行を表示/非表示にする場合にも発生します。

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

cがnullである3​​進a ? b : c形式に変更すると修正されます

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

私の場合、空の''出力（内部にスペースなし）

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

nullはトリックを行います：

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

私の場合、受け入れられた答えは根本的な原因ではありませんでした。 <th>タグの後にコメントがあると、同じ警告が表示されます。コメントを削除すると、警告は消えました。

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

編集：</th>と{/*の間のスペースを削除することでもうまくいきます。

5
Jarno Argillander

通知の警告：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;

1
Đặng Xuân Trường

ReactのMaterial UIで他の誰かがこのエラーまたは同様のホワイトスペースエラーに遭遇した場合、コードを数時間壊した後の私のソリューションは、テーブル内の単純なjavascriptコメントでした。

 { /*  sortable here */ }

テーブル要素の間からそれを削除すると、警告が消えました。

1
paulzmuda

中括弧の代わりに括弧があったときにこの警告を受けました

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

@Jarnoの答えに加えて、私もこの問題に遭遇しました。 JavaScriptコードの最後に追加の}または{がないことを再確認します。

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

<tr>要素なしで<td>要素内にテキストを配置すると、この警告を受け取りました。テキストを<td>要素でラップすると、警告が消えました。

これを行ったとき、テキストに空白が含まれていたり、{}を使用したことは問題ではありませんでした。

0
EnKayJay