Question

renderTaskSection() {
    const { task, priority, isCompleted } = this.props;

    const taskStyle = {
        color: isCompleted ? 'green' : 'red',
        cursor: 'pointer'
    };

    if (this.state.isEditing) {
        return (
            <td>
                <form onSubmit={this.onSaveClick.bind(this)}>
                    <input type="text" defaultValue={task} ref="editInput" />
                    <input type="text" defaultValue={priority} ref="editInput2" />
                </form>
            </td>
        );
    }

    return (
        <div>
        <td style={taskStyle}
            onClick={this.props.toggleTask.bind(this, task)}
        >
            {task}
        </td>
        <td style={taskStyle}
            onClick={this.props.toggleTask.bind(this, task)}
        >
            {priority}
        </td>
        </div>
    );
}

我有这行代码，似乎每当我为每个元素添加一个td时，它会导致某种问题，如果我有一个td元素而不是两个，一切都很好。

我认为将div中的元素包装起来会解决所有问题，但我错了，所以我不确定为什么这会导致React出现很多问题，特别是因为我们可以在一个渲染中一个接一个地添加两个组件。有一个简单的解决方法吗？

这些是我在Firefox上收到的一些消息：

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>. See TodosListItem > tr > div.  bundle.js:11406:10
Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>. See TodosListItem > div > td.  bundle.js:11406:10
Error: findComponentRoot(..., .0.2.1.$1.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.  bundle.js:10062:16
[WDS] Disconnected!  bundle.js:635:11
saveTask  bundle.js:28539:14
Error: findComponentRoot(..., .0.2.1.$0.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.  bundle.js:10062:16
TypeError: onClickListeners[id] is undefined[Learn More]

另外，当我将带有表单标记的自己的td标记中的两个输入括起来时，我收到了类似的错误。

Answer 1

更改此renderTaskSection以返回<tr>，将来电render更改为仅<tbody>

render() {
    <table>
        <tbody>
            {this.renderTaskSection()}
        </tbody>
    </table>
}

renderTaskSection() {
    const { task, priority, isCompleted } = this.props;

    const taskStyle = {
        color: isCompleted ? 'green' : 'red',
        cursor: 'pointer'
    };

    if (this.state.isEditing) {
        return (
            <tr>
                <td>
                    <form onSubmit={this.onSaveClick.bind(this)}>
                        <input type="text" defaultValue={task} ref="editInput" />
                        <input type="text" defaultValue={priority} ref="editInput2" />
                    </form>
                </td>
            </tr>
        );
    }

    return (
        <tr>
            <td style={taskStyle} onClick={this.props.toggleTask.bind(this, task)}>
                {task}
            </td>
            <td style={taskStyle} onClick={this.props.toggleTask.bind(this, task)}>
                {priority}
            </td>
        </tr>
    );
}

解决React.js中的限制

1 个答案: