Question

我试图让这项工作：

订单

render () {
    const orders = this.state.orders.map((order, index) => <OrderRow order={order} key={index}/>);

    return (
        <table>
            <tbody>
                {orders}
            </tbody>
        </table>
    );
}

OrderRow：

render () {
    return (
        <tr>
            <td>{this.props.order.number}</td>
            <td>{this.props.order.products}</td>
            <td>{this.props.order.shippingDate}</td>
            <td>{this.props.order.status}</td>
        </tr>
    );
}

但仍然收到此错误：

警告：validateDOMNesting（...）：不能作为孩子出现。请参阅订单＆gt; div> OrderRow＆gt; TR。

任何想法如何解决？

Answer 1

这样的事情：

render () {
    return (
        <table>
            <tbody>
            {this.state.orders.map((order, index) => {
		        <tr index={index}>
		            <td>{order.number}</td>
		            <td>{order.products}</td>
		            <td>{order.shippingDate}</td>
		            <td>{order.status}</td>
		        </tr>
		    }}
            </tbody>
        </table>
    );
}

Answer 2

按照问题here中的说明，将您的OrderRow <tr>包裹在<tbody>中，浏览器需要<tbody>标记。如果它不在您的代码中，则浏览器将自动插入它。这将在第一次渲染时正常工作，但是当表更新时，DOM树与React期望的不同。这可能会产生奇怪的错误，因此React会警告您插入<tbody>。

OrderRow

render () {
    return (
       <table>
        <tbody>
         <tr>
            <td>{this.props.order.number}</td>
            <td>{this.props.order.products}</td>
            <td>{this.props.order.shippingDate}</td>
            <td>{this.props.order.status}</td>
         </tr>
        </tbody>
       </table>
    );
}

Answer 3

它将tr渲染为div使用.map（）代替：）

Answer 4

或更优雅：

＆＃13;

render () {
    return (
        <table>
            <tbody>
            {this.state.orders.map((order, index) => (
            	return (<OrderRow order={order} key={index} />);
            )}
            </tbody>
        </table>
    );
}

＆＃13;

validateDOMNesting（...）：不能作为<div>的子项出现

4 个答案: