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を追加するたびに、私は1つのtd要素の代わりに、2を持っている場合、それは、問題のいくつかの種類が発生しているようです、 すべて順調。

私は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] 

私はformタグで、独自のTDタグで囲まれた2つの入力を囲むとき、私は同様のエラーを取得します。

Answer 1

変更このrenderTaskSectionが<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> 
    ); 
}