在React.js围绕​​限制工作

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> 
    ); 
}