你能给我解释一下为什么要显示警告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

enter image description here

问题出在哪里?

推荐答案

问题在于这行的空格:

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 被截断?