如何不借助额外数据存储动态创建并追加React元素？遇[object Object]问题

你遇到的[object Object]问题，核心原因是React元素（createElement返回的是虚拟DOM对象）不能直接通过原生DOM的append方法添加——原生DOM的append只识别真实DOM节点，直接传入React对象会被强制转成字符串输出。

如果想不用数组/对象存储数据来动态追加组件，可以先把React元素渲染为真实DOM，再添加到目标元素中：

修改后的代码 #

import { createElement, useRef } from "react";
import ReactDOM from 'react-dom/client';

function CustomInput() {
  return (
    <>
      <input type="text" />
      <button>-</button>
    </>
  );
}

function App() {
  const ulRef = useRef<HTMLUListElement | null>(null);

  const handleAdd = () => {
    // 创建原生li节点作为组件挂载容器
    const liNode = document.createElement('li');
    // 将CustomInput组件渲染到原生li节点中
    const root = ReactDOM.createRoot(liNode);
    root.render(<CustomInput />);
    
    // 把挂载好组件的li添加到ul里
    ulRef.current?.append(liNode);
  };

  const handleRemove = () => {
      console.log(ulRef.current);
  };

  return (
    <div className="App">
      <ul style={{ listStyle: "none" }} ref={ulRef}>
        <li>
          <CustomInput />
        </li>
      </ul>
      <button onClick={handleAdd}>Add another input</button>
    </div>
  );
}

export default App;

额外说明 #

这种写法能实现你的需求，但不符合React「状态驱动UI」的核心设计思路。更规范的做法是用数组存储组件状态（比如每次点击Add就往数组里添加一项，再通过map渲染），后续的状态维护、组件更新会更稳定可控。

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