Reactjs react:validateDOMNesting:#text cannot appear as a child of
你能给我解释一下为什么要显示警告Warning: validateDOMNesting(...): #text cannot appear as a child of <tr>. See Router > RouterContext > CarWashPage > AllCarWashTable > tr > #text.
吗?我在标签tr
里没有看到任何文字
Code that renders table
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>
)
}
}
最后,my table has the following structure
问题出在哪里?
推荐答案
问题在于这行的空格:
return <tr key={item.id}> {cells} </tr>;
这可能看起来很傻,但实际上是在渲染单元格and some whitespace(即文本).应该是这样的:
return <tr key={item.id}>{cells}</tr>;
Reactjs相关问答推荐
从`redux—thunk`导入thunk `在stackblitz中不起作用
有没有办法让两个状态在两次精准渲染中更新?
UseEffect和useSelector的奇怪问题导致无限循环
React中的useEffect钩子
这两个子元素在Reaction Native中使用的有什么不同?
svg每条路径上的波浪动画
无法在下一个标头上使用 React hooks
如果我使用 formik,如何在嵌套对象中写入正确的值?
列表中的每个子项都应该有一个唯一的keyprops .在react 应用程序中
如何在不同的路由中渲染相同的页面组件(包括 getServerSideProps)
在react的useEffect钩子中,我的函数被调用,但只有第一个函数能够改变状态,第二个函数无法改变状态.
如何到达类组件中的状态?
React + Redux:数据未正确传递给具有动态路由的组件
React 测试库 - 如何断言异步函数之间的中间状态?
为什么 setState 在 React 中不是异步的?
useState 在生命周期中的位置
使用 React.UseEffect 从 api 获取但我的清理返回不起作用
如何在 JSX 中使用 -webkit- 前缀?
Axios 删除在带有授权令牌的react js 中不起作用
如何防止 mui x-date-picker 被截断?
实用课程推荐
你能给我解释一下为什么要显示警告Warning: validateDOMNesting(...): #text cannot appear as a child of <tr>. See Router > RouterContext > CarWashPage > AllCarWashTable > tr > #text.
吗?我在标签tr
里没有看到任何文字
Code that renders table
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>
)
}
}
最后,my table has the following structure
问题出在哪里?
推荐答案
问题在于这行的空格:
return <tr key={item.id}> {cells} </tr>;
这可能看起来很傻,但实际上是在渲染单元格and some whitespace(即文本).应该是这样的:
return <tr key={item.id}>{cells}</tr>;
Reactjs相关问答推荐
从`redux—thunk`导入thunk `在stackblitz中不起作用
有没有办法让两个状态在两次精准渲染中更新?
UseEffect和useSelector的奇怪问题导致无限循环
React中的useEffect钩子
这两个子元素在Reaction Native中使用的有什么不同?
svg每条路径上的波浪动画
无法在下一个标头上使用 React hooks
如果我使用 formik,如何在嵌套对象中写入正确的值?
列表中的每个子项都应该有一个唯一的keyprops .在react 应用程序中
如何在不同的路由中渲染相同的页面组件(包括 getServerSideProps)
在react的useEffect钩子中,我的函数被调用,但只有第一个函数能够改变状态,第二个函数无法改变状态.
如何到达类组件中的状态?
React + Redux:数据未正确传递给具有动态路由的组件
React 测试库 - 如何断言异步函数之间的中间状态?
为什么 setState 在 React 中不是异步的?
useState 在生命周期中的位置
使用 React.UseEffect 从 api 获取但我的清理返回不起作用
如何在 JSX 中使用 -webkit- 前缀?
Axios 删除在带有授权令牌的react js 中不起作用
如何防止 mui x-date-picker 被截断?
实用课程推荐