时间戳

首页 > 解决方案 > 在反应中添加元素的正确方法？

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

问题描述

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

标签： javascriptreactjs

解决方案

使用 appendChild() 是不好的做法吗

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

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

ReactJS 的工作方式是它创建一个虚拟 DOM 并将更改与虚拟 DOM 的先前版本进行比较。如果有变化，它将更新用户看到的真实 DOM。这就是为什么你不应该使用像appendChildand之类的函数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

推荐阅读