警告:validateDOMNesting(.)：<div>不能作为<tbody>的子级出现
警告:validateDOMNesting(.)：<div>不能作为<tbody>的子级出现
提问于 2017-07-26 23:39:43
我在React中创建了一个表(我是新的React)，但是我们使用的是CategoryDataCan，还是应该使用其他的东西呢？它没有正确地创建单元格，也就是说，它创建的单元格与来自父单元的<th>不对齐，而且它们根本没有单元格边界。它也发出了这样的警告：
Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>. See Param > tbody > Row > div.
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. See Row > div > tr.
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>. See CategoryData > div > tr.我不知道为什么会发生这些警告，以及为什么表单元格(来自CategoryData)没有对齐并且没有单元格边框。正确的方法是什么？
码
var Param = React.createClass({
getInitialState: function() {
return {
isLoading: true,
panelTitle: "",
data: [],
categories: []
}
},
updateState: function() {
var that = this;
var categories = new Set();
rest.getParameters('service').then(function (results) {
for (var i = 0; i < results.data.length; i++) {
categories.add(results.data[i].category);
}
that.setState({
data: results.data,
categories: Array.from(categories)
})
}).catch(function (err) {
console.error('rest.getParameters(): ', err);
that.setState({
isLoading: true,
data: [],
categories: []
})
});
},
componentDidMount: function() {
this.updateState();
},
render: function() {
return (
<Panel className="panel-info" header={<h4 className="panel-title">Service Config</h4>}>
<div>
<table className="table table-striped table-bordered table-hover table-condensed table-responsive">
<thead>
<tr>
<th className="col-lg-2 text-center">AMP Name</th>
<th className="col-lg-2 text-center">Athena Name</th>
<th className="col-lg-2 text-center">Description</th>
<th className="col-lg-1 text-center">Default</th>
<th className="col-lg-1 text-center">Min Value</th>
<th className="col-lg-1 text-center">Max Value</th>
<th className="col-lg-1 text-center">Action</th>
</tr>
</thead>
<tbody>
{this.state.categories.map((category, index) =>
<th colSpan="7" key={index} style={{'textAlign':'left', 'paddingLeft':'5px', 'backgroundColor': '#D3D0CF'}}>{this.state.category}</th>
this.state.data.map((row, i) =>
if (row.category === category) {
<tr key={i}>
<td className="col-lg-2 text-center">{row.name}</td>
<td className="col-lg-2 text-center">{row.alias}</td>
<td className="col-lg-2 text-center">{row.description}</td>
<td className="col-lg-1 text-center">{row.default_value}</td>
<td className="col-lg-1 text-center">{row.min_value}</td>
<td className="col-lg-1 text-center">{row.max_value}</td>
<td className="col-lg-1 text-center">Action</td>
</tr>
}
)
)}
</tbody>
</table>
</div>
</Panel>
);
}
});回答 2
Stack Overflow用户
发布于 2017-07-27 03:04:36
我会把'th‘改为'tr’，因为我非常肯定，如果你在'tbody‘中添加'th’，我的反应会给你一个警告
let finalList = []
this.state.categories.forEach( (cat, index) => {
finalList.push(<tr...>{this.state.category}</tr>)
this.state.data.forEach( (row, index) => {
if(row.category === cat){
finalList.push(
<tr key={i}>
<td className="col-lg-2 text-center">{row.name}</td>
<td className="col-lg-2 text-center">{row.alias}</td>
<td className="col-lg-2 text-center">{row.description}</td>
<td className="col-lg-1 text-center">{row.default_value}</td>
<td className="col-lg-1 text-center">{row.min_value}</td>
<td className="col-lg-1 text-center">{row.max_value}</td>
<td className="col-lg-1 text-center">Action</td>
</tr>
)
}
})
})警告词，我将避免使用表格，签出css网格，它们更灵活，而且支持得很好。
Stack Overflow用户
发布于 2017-07-27 05:14:04
编辑:从react中的16.0.0版本开始，您可以使用React.Fragment从呈现返回多个元素
<tbody>
{
this.state.categories.map((category, index) => {
var innerData = this.state.data.map((row, i) => {
if (row.category === category) {
return (
<tr key={i}>
<td className="col-lg-2 text-center">{row.name}</td>
<td className="col-lg-2 text-center">{row.alias}</td>
<td className="col-lg-2 text-center">{row.description}</td>
<td className="col-lg-1 text-center">{row.default_value}</td>
<td className="col-lg-1 text-center">{row.min_value}</td>
<td className="col-lg-1 text-center">{row.max_value}</td>
<td className="col-lg-1 text-center">Action</td>
</tr>
)
}
return null
})
return (
<React.Fragment>
<th colSpan="7" key={index} style={{
'textAlign': 'left',
'paddingLeft': '5px',
'backgroundColor': '#D3D0CF'
}}>{this.state.category}</th>,
{innerData}
</React.Fragment>
)
})
}
</tbody>先于v16
在JSX syntactic sugar的帮助下，可以从组件中返回多个元素，方法是将它们作为逗号分隔的元素写入一个数组中，如
<tbody>
{
this.state.categories.map((category, index) => {
var innerData = this.state.data.map((row, i) => {
if (row.category === category) {
return (
<tr key={i}>
<td className="col-lg-2 text-center">{row.name}</td>
<td className="col-lg-2 text-center">{row.alias}</td>
<td className="col-lg-2 text-center">{row.description}</td>
<td className="col-lg-1 text-center">{row.default_value}</td>
<td className="col-lg-1 text-center">{row.min_value}</td>
<td className="col-lg-1 text-center">{row.max_value}</td>
<td className="col-lg-1 text-center">Action</td>
</tr>
)
}
return null
})
return ([
<th colSpan="7" key={index} style={{
'textAlign': 'left',
'paddingLeft': '5px',
'backgroundColor': '#D3D0CF'
}}>{this.state.category}</th>,
[...innerData]
])
})
}
</tbody>此外，当您在map函数中使用if语句时，您需要在返回语句之外使用它们，现在如果执行{this.state.categories.map((category, index) => <tr>...，这意味着箭头之后的任何内容都被认为是返回的一部分，因此内部映射的if语句将给您一个错误。
react页面上有一个问题，用于返回多个元素。阅读它获得更多细节。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45339086
复制相关文章
相似问题
腾讯云开发者
