当前位置：首页 > React

react 实现append

2026-01-26 14:38:28React

在 React 中实现类似 jQuery 的 `append` 功能

React 采用声明式编程范式，与 jQuery 的直接 DOM 操作不同。以下是几种实现动态添加元素的方法：

使用状态管理动态内容

通过 React 的状态管理可以动态添加元素到组件中：

import { useState } from 'react';

function AppendExample() {
  const [items, setItems] = useState(['初始项']);

  const appendItem = () => {
    setItems([...items, `新项 ${items.length + 1}`]);
  };

  return (
    <div>
      <button onClick={appendItem}>添加元素</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

使用 ref 直接操作 DOM

当确实需要直接操作 DOM 时，可以使用 ref：

import { useRef } from 'react';

function DirectAppend() {
  const containerRef = useRef(null);

  const appendElement = () => {
    const newElement = document.createElement('div');
    newElement.textContent = '动态添加的元素';
    containerRef.current.appendChild(newElement);
  };

  return (
    <div>
      <button onClick={appendElement}>添加元素</button>
      <div ref={containerRef}></div>
    </div>
  );
}

使用 React 门户(Portal)

对于需要将子节点渲染到 DOM 中不同位置的情况：

import { useState } from 'react';
import { createPortal } from 'react-dom';

function PortalExample() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(true)}>
        显示模态框
      </button>
      {show && createPortal(
        <div className="modal">
          <p>这是通过门户添加的内容</p>
          <button onClick={() => setShow(false)}>关闭</button>
        </div>,
        document.body
      )}
    </div>
  );
}

动态渲染组件数组

通过维护组件数组来实现动态添加：

function DynamicComponents() {
  const [components, setComponents] = useState([]);

  const addComponent = () => {
    setComponents([
      ...components,
      <div key={components.length}>组件 {components.length + 1}</div>
    ]);
  };

  return (
    <div>
      <button onClick={addComponent}>添加组件</button>
      {components}
    </div>
  );
}