反應：validateDOMNesting：#text不能作爲孩子出現<tr>

你能解釋一下爲什麼反應顯示警告Warning: validateDOMNesting(...): #text cannot appear as a child of <tr>. See Router > RouterContext > CarWashPage > AllCarWashTable > tr > #text.？我沒有看到裏面標籤的任何文本呈現表反應：validateDOMNesting：#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> 
    ) 
} 
}

在結束tr

代碼，我的表結構如下

在哪裏問題？

來源

2016-10-07 Eugene Podoliako

的問題是在這條線的空間：

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

它可能看起來很可笑，但你實際渲染單元和一些空白（即文本）。它應該看起來像這樣：

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

來源

2016-10-07 10:26:59 tobiasandersen

謝謝你，你是絕對是正確的:) –

接受的答案不是我的情況的根本原因。當我在<th>標籤後發表評論時，我收到了相同的警告。當我刪除評論時警告消失了。

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

編輯：之間和去除空間{/ *也將這樣的伎倆

來源

2017-09-18 18:40:33

對我來說太 – julianljk

除了@亞諾的答案，我也遇到了這個問題爲好。仔細檢查你沒有在你的JavaScript代碼到底有什麼額外的}或{：

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

來源

2017-10-04 13:28:01 FrankerZ

在我的情況下是空的'輸出（W \ O空間內）：

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

來源

2018-02-26 08:42:52 Victor

謝謝。這確實解決了我的問題。 – sg552

反應：validateDOMNesting：#text不能作爲孩子出現<tr>

回答

相關問題