Question

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

Answer 1

我建议将表动态化为您拥有的数据，并将数据设置为状态。单击后，您可以更新状态（通过添加新行的数据），这将使用新添加的数据行重新呈现表。

Answer 2

在状态为一个对象等于表的一行的状态下，将数据添加到对象数组中。然后，您可以像这样添加一行：

......
this.state = { 
   ArrayData: [],
   newRowValueObject: {}
}
....

<Button onClick={()=>[...this.state.ArrayData, newRowValueObject]}> <Button/>

Answer 3

使用appendChild（）是一种不好的做法

是，这违反了ReactJS的整个目的

您的ReactJS应用应基于数据呈现UI，在这种情况下，您将不必使用直接DOM操作，尤其是因为您所做的任何更改都会在下一次ReactJS呈现中消失。

ReactJS的工作方式是创建一个虚拟DOM并将更改与虚拟DOM的先前版本进行比较。如果有更改，它将更新用户看到的真实DOM。这就是为什么您不应该使用appendChild和innerHTML之类的函数或其他DOM操作方法的原因，因为ReactJS不在乎您在真实DOM中手动执行的操作，并且会清除掉它。 / p>

这是一个基本的可运行示例，该示例具有一个包含两个人的表，以及一个向状态添加另一个人的按钮，这将导致表重新呈现并添加另一个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

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

3 个答案:

文档