React报错：类型'Element'无法赋值给'Node'，求解决方案及示例

错误原因 #

Argument of type 'Element' is not assignable to parameter of type 'Node'这个错误的核心原因：

• <DisplayMuscleInProgram />是React元素，本质是描述DOM结构的JavaScript对象，并非真实的DOM节点；
• container.appendChild()方法要求传入的是真实DOM节点（Node类型），两者类型不匹配，因此TypeScript抛出类型错误；
• 更关键的是，这种直接操作DOM的方式违背了React的核心设计——React通过虚拟DOM管理视图，手动操作DOM会破坏状态与视图的同步机制。

React中是否可以创建DOM元素？ #

可以，但不推荐直接手动操作DOM，React提供了更优雅的状态驱动视图的方式。仅在特殊场景下，才需要直接创建并操作真实DOM。

正确实现需求的示例（React状态驱动方式） #

用useState管理需要渲染的肌肉训练项数量，点击Add按钮时更新状态，遍历状态渲染对应组件，同时为每个组件设置唯一的表单字段名，避免值冲突：

import { Formik, Form, Field } from "formik";
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { getAllMuscles, numberOfExercices } from "../helpers/dataModuler";
import { setInLocalStorage } from "../helpers/localStorageHandler";

const listOfMuscles = getAllMuscles();

export const ProgramForm: React.FC<{}> = () => {
  const listOfMuscles = getAllMuscles();
  const navigate = useNavigate();
  // 用状态管理肌肉训练项数量，初始为1
  const [muscleItemsCount, setMuscleItemsCount] = useState(1);

  // 生成支持多肌肉项的初始表单值
  const getInitialValues = () => {
    const initialValues: any = {};
    for (let i = 0; i < muscleItemsCount; i++) {
      initialValues[`muscle_${i}`] = listOfMuscles[0];
      initialValues[`numberOfExercices_${i}`] = 0;
    }
    return initialValues;
  };

  const handleSubmit = (values: any) => {
    // 整理表单数据为数组格式存储
    const program = Array.from({ length: muscleItemsCount }, (_, i) => ({
      muscle: values[`muscle_${i}`],
      numberOfExercices: values[`numberOfExercices_${i}`]
    }));
    setInLocalStorage("program", program);
    navigate("/programme");
  };

  return (
    <>
      <Formik
        initialValues={getInitialValues()}
        onSubmit={(values) => handleSubmit(values)}
        enableReinitialize // 当训练项数量变化时重新初始化表单
      >
        <Form>
          <div id="container">
            {/* 遍历渲染多个训练项组件，传入索引区分字段名 */}
            {Array.from({ length: muscleItemsCount }, (_, index) => (
              <DisplayMuscleInProgram key={index} itemIndex={index} />
            ))}
          </div>

          <button
            onClick={() => setMuscleItemsCount(prev => prev + 1)}
            type="button"
            className="rounded-md border"
          >
            Add
          </button>

          <div className="text-center">
            <button
              type="submit"
              className="mt-8 rounded-lg bg-primary p-2 text-white"
            >
              Let's gooooo 💪
            </button>
          </div>
        </Form>
      </Formik>
    </>
  );
};

// 修改组件，接收索引设置唯一的表单字段名
export const DisplayMuscleInProgram: React.FC<{ itemIndex: number }> = ({ itemIndex }) => {
  return (
    <>
      <div className="my-4 grid grid-cols-5 justify-between gap-5">
        <Field
          as="select"
          className="col-span-3 rounded-lg bg-lightGray p-3"
          name={`muscle_${itemIndex}`}
        >
          {listOfMuscles.map((muscle) => (
            <option key={muscle}>{muscle}</option>
          ))}
        </Field>
        <Field
          as="select"
          className="col-span-2 rounded-lg bg-lightGray p-3"
          name={`numberOfExercices_${itemIndex}`}
        >
          {numberOfExercices(10)}
        </Field>
      </div>
    </>
  );
};

手动创建DOM元素的示例（不推荐） #

如果确实需要直接操作DOM，可以通过ReactDOM.render将React组件渲染为真实DOM后插入，但这种方式会脱离React状态管理，后续表单同步、组件更新容易出问题：

import ReactDOM from 'react-dom';

const addMuscleToProgram = () => {
  const container = document.getElementById("container");
  if (container) {
    // 创建临时容器
    const tempDiv = document.createElement('div');
    // 将React组件渲染为真实DOM
    ReactDOM.render(<DisplayMuscleInProgram />, tempDiv);
    // 插入真实DOM节点到目标容器
    container.appendChild(tempDiv.firstChild as Node);
  }
};

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