如何将自定义React组件添加到DOM元素？渲染出现[Object object]问题

你用innerHTML += ${(

return (<SingleInvite index={index} />)

)}``的方式完全错误——JSX语法最终会被编译成React.createElement()调用，返回的是一个React元素对象，当你把它塞进模板字符串转成字符串时，对象就会被序列化为[Object object]，这就是你看到的问题。而且直接操作DOM也违背了React的声明式渲染原则，会导致React无法追踪这些动态添加组件的状态。

用React的状态管理动态组件列表，不要直接操作DOM：

1. 用useState维护一个存储索引（或组件数据）的数组
2. 点击按钮时，往数组里添加新的索引值
3. 遍历数组渲染对应的SingleInvite组件

示例代码：

import { useState } from 'react';
import SingleInvite from "./SingleInvite";

function YourComponent() {
  // 用状态维护邀请项的索引列表，初始包含一个索引0
  const [inviteIndexes, setInviteIndexes] = useState([0]);

  const newInvite = () => {
    // 新索引取当前列表长度，保证唯一性
    setInviteIndexes(prev => [...prev, prev.length]);
  };

  return (
    <div>
      <div className="container">
        {/* 遍历索引列表渲染组件 */}
        {inviteIndexes.map(index => (
          <SingleInvite key={index} index={index} />
        ))}
      </div>

      <button className="add-another" onClick={newInvite}>
        <img src={plus} className="plus" alt="" /> Add another
      </button>
    </div>
  );
}

export default YourComponent;

• 给每个动态渲染的组件加上唯一的key属性，这是React列表渲染的强制要求，能帮助React高效更新DOM
• 这种方式完全遵循React的声明式渲染逻辑，所有组件都由React统一管理，状态变化会自动触发重新渲染，不会出现DOM操作导致的异常

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