你能解释一下为什么 react 显示警告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>
)
}
}
最后,我的表格具有以下结构
问题出在哪里?
最佳答案
当使用逻辑 AND 短路 &&
显示/隐藏条件行时也会发生这种情况:
{
foo && (<tr><td>{foo}</td></tr>)
}
将其更改为三元 a ? b : c
形式,其中 c 为 null
将修复它
{
foo ? (<tr><td>{foo}</td></tr>) : null
}
关于reactjs - react : validateDOMNesting: #text cannot appear as a child of <tr>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39914455/