在React中添加元素的正确方式是什么？

Question

在React中添加元素的正确方式是什么？

javascriptreactjs

3

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

- remoo

在使用React时：是的，确实如此。在React组件中使用状态（states）。 - lumio

它只在一些必要的情况下使用。通常情况下，你应该在你的组件中控制它，比如在状态改变时使用循环来渲染表格，或者类似的操作。 - dungmidside

1

@dungtranhcmus 你在ReactJS应用中绝对不应该使用直接的DOM操作方法，这与ReactJS的整体目的背道而驰。如果你发现它“必要”，那么你需要重新思考你想要实现的目标，并以正确的“React方式”解决问题。 - AnonymousSB

3个回答

1

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

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

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

- Psartek

0

我建议根据你所拥有的数据，将表格设置为动态，并将数据设置为状态。当你点击时，可以通过添加新行的数据来更新状态，这将重新渲染带有新增数据的表格。

- Shekar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AnonymousSB · Accepted Answer

使用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>

Documentation

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

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