javascript - 在 react 中添加元素的正确方法？

Question

如何在 ReactJS 中添加一个元素？如果我想在点击按钮时添加一个表格行，使用appendChild()是不是不好的做法？

Answer 1

is it bad practice to use the appendChild()

是，这违背了 ReactJS 的全部目的

您的 ReactJS 应用程序应该根据数据呈现 UI，在这种情况下，您永远不必使用直接的 DOM 操作，特别是因为您所做的任何更改都将在下一个 ReactJS 呈现中消失。

ReactJS 的工作方式是它创建一个虚拟 DOM 并将更改与以前版本的虚拟 DOM 进行比较。如果有变化，它将更新用户看到的真实 DOM。这就是为什么你不应该使用像 appendChild 和 innerHTML 这样的函数，或者其他 DOM 操作方法，因为 ReactJS 不会关心你在真实 DOM 中手动做了什么，并且会消灭它。

这是一个基本的可运行示例，其中有一个包含两个人的表格，以及一个将另一个人添加到状态的按钮，这会导致表格重新呈现并添加另一个 tr

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      tableData: [
        { name: 'John', age: 25 },
        { name: 'Peter', age: 43 }
      ]
    };
    this.renderTableRows = this.renderTableRows.bind(this)
    this.addPerson = this.addPerson.bind(this)
  }
  addPerson() {
    const newPerson = { name: 'Mary', age: 38 }
    const tableData = [
      ...this.state.tableData,
      newPerson
    ]
    this.setState({tableData});
  }
  renderTableRows() {
    const { tableData } = this.state
    if (!tableData) return null;
    let result = [];
    tableData.forEach(person => {
      result.push(
        <tr>
          <td>{person.name}</td>
          <td>{person.age}</td>
        </tr>
      )
    });
    return result;
  }
  render() {
    return (
      <div>
        <table>
          <tr>
            <th>Name</th>
            <th>Age</th>
          </tr>
          {this.renderTableRows()}
        </table>
        <button onClick={this.addPerson}>Add Person</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

table, th, td {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

文档

https://reactjs.org/docs/faq-internals.html

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model