React中除原生DOM操作外的DOM元素追加方法咨询

嘿，作为React新手，完全理解你刚接触时的困惑——你现在用的原生DOM操作其实是React不推荐的做法，React的核心思想是状态驱动UI，咱们换React的思路来实现这个需求会更优雅，而且能避免很多潜在的bug～

下面给你几种常用的方案，都是React的标准玩法：

方案1：类组件用State管理（适配你已导入的Component） #

这是最符合React设计理念的方式：用state存储所有列表项，当需要添加新值时，更新state，React会自动帮你重新渲染UI，完全不用手动操作DOM。

import React, { Component } from 'react';

class YourComponent extends Component {
  // 初始化状态，用来保存列表数据
  state = {
    listItems: []
  };

  // 定义添加新项的方法
  addNewItem = (value) => {
    // 注意：不要直接修改state，要通过setState返回新的数组（保持不可变性）
    this.setState(prevState => ({
      listItems: [...prevState.listItems, value]
    }));
  };

  render() {
    return (
      <div id="root">
        <ul>
          {/* 遍历state中的列表项，渲染成<li> */}
          {this.state.listItems.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
        {/* 这里模拟触发添加的场景，比如点击按钮添加值 */}
        <button onClick={() => this.addNewItem('你要添加的内容')}>添加列表项</button>
      </div>
    );
  }
}

export default YourComponent;

为什么这更好？ #

React会维护虚拟DOM，当state变化时，它只会更新需要变化的部分，比手动操作DOM更高效，也更符合React的数据流逻辑，代码也更易维护。

方案2：函数组件用useState钩子（如果你之后学函数组件的话） #

现在React更推荐函数组件+钩子的写法，逻辑和类组件类似，只是用useState来管理状态：

import React, { useState } from 'react';

function YourComponent() {
  // 初始化列表状态
  const [listItems, setListItems] = useState([]);

  const addNewItem = (value) => {
    // 更新状态，追加新值
    setListItems(prevItems => [...prevItems, value]);
  };

  return (
    <div id="root">
      <ul>
        {listItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={() => addNewItem('你要添加的内容')}>添加列表项</button>
    </div>
  );
}

export default YourComponent;

方案3：特殊场景下用Ref操作DOM（不推荐，但可以了解） #

如果你真的有必须手动操作DOM的特殊场景，React提供了Refs来安全地访问真实DOM元素，避免直接用getElementById这种方式：

import React, { Component, createRef } from 'react';

class YourComponent extends Component {
  // 创建一个ref关联到<ul>元素
  listRef = createRef();

  addNewItem = (value) => {
    const para = document.createElement("li");
    const t = document.createTextNode(value);
    para.appendChild(t);
    // 通过ref获取真实DOM元素，再追加
    this.listRef.current.appendChild(para);
  };

  render() {
    return (
      <div id="root">
        {/* 把ref关联到<ul> */}
        <ul ref={this.listRef}></ul>
        <button onClick={() => this.addNewItem('你要添加的内容')}>添加列表项</button>
      </div>
    );
  }
}

export default YourComponent;

注意： #

这种方式尽量少用，因为手动操作DOM会绕过React的虚拟DOM机制，可能导致UI和状态不一致，出现难以排查的bug。除非你有特别的需求（比如操作第三方DOM库），否则优先用前两种方案。

内容的提问来源于stack exchange，提问作者firmfiasco