[英]Warning: validateDOMNesting(…): <div> cannot appear as a child of <tbody>
I'm creating a table in React (I'm new to React), but the CategoryDataCan we live with those or should we use something else?我正在 React 中创建一个表(我是 React 的新手),但是 CategoryData 我们可以使用这些还是应该使用其他东西? It is not creating cells correctly, ie it's creating cells that are not aligned with the
<th>
that come from the parent and they do not have cell borders at all.它没有正确创建单元格,即它创建的单元格与来自父级的
<th>
不对齐,并且它们根本没有单元格边框。 It's also giving these warnings:它还发出以下警告:
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.
I'm not sure why these warnings are happening and why the table cells(from CategoryData
) are not getting aligned and don't have cell borders.我不确定为什么会发生这些警告以及为什么表格单元格(来自
CategoryData
)没有对齐并且没有单元格边框。 What's the correct way to do it?正确的做法是什么?
Code代码
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>
);
}
});
I would change the 'th' to a 'tr' because I'm pretty sure react will give you a warning if you add 'th' inside 'tbody'我会将“th”更改为“tr”,因为我很确定如果在“tbody”中添加“th”,react 会向您发出警告
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>
)
}
})
})
Word of warning I would avoid using tables checkout css grids their a lot more flexible and pretty well supported警告的话,我会避免使用表格结帐 css 网格,它们更加灵活并且得到很好的支持
EDIT: From version 16.0.0 onwards in react, you could make use of React.Fragment to return multiple elements from render编辑:从版本 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>
Before v16 v16 之前
With the help of JSX syntactic sugar
it is possible to return multiple elements from within a component, by writing them as comma separated elements in an array like在
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>
Also when you make use of if statements within a map function, you need to have them outside of the return statement, now if you do {this.state.categories.map((category, index) => <tr>...
it means that whatever is after the arrow is considered to be part of the return and hence you inner map's if statement will give you an error.此外,当您在 map 函数中使用 if 语句时,您需要将它们放在 return 语句之外,现在如果您执行
{this.state.categories.map((category, index) => <tr>...
这意味着箭头后面的任何内容都被视为返回的一部分,因此您内部地图的 if 语句会给您一个错误。
There is an issue on react github page for returning multiple elements.反应 github 页面上存在一个问题,用于返回多个元素。 Read through it for more details.
通读它以获取更多详细信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.