类型 'Element' 的参数不可分配给类型 'Node' 的参数

Question

上下文：我有一个应用程序，它有一个表单，您可以在其中选择一块肌肉，并为这个选定的肌肉做一些练习。这个想法是添加任何你想要的肌肉，以其形式的锻炼次数。

listOfMuscles只是一个拥有所有现有肌肉的阵列。

我想做的事：当我点击Add按钮时，我想创建一个新的div(与displayMuscleInProgram()中的一样，让用户为他的程序添加一块新肌肉。

问题：使用此代码，我得到一个错误，说：Argument of type 'Element' is not assignable to parameter of type 'Node'.

我的问题：为什么会弹出此错误？React有没有办法创建DOM元素。如果是，你能给我举个例子吗？

我在这里写下我的整个页面：

import { Formik, Form, Field } from "formik";
import React 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();
const initialValues = {
numberOfExercices: 0,
muscle: listOfMuscles[0]
};
const handleSubmit = (values: {}) => {
setInLocalStorage("program", values);
navigate("/programme");
};
return (
<>
<Formik
initialValues={initialValues}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<div id="container">
<DisplayMuscleInProgram />
</div>
<button
onClick={addMuscleToProgram}
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<{}> = () => {
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"
>
{listOfMuscles.map((muscle) => (
<option key={muscle}>{muscle}</option>
))}
</Field>
<Field
as="select"
className="col-span-2 rounded-lg bg-lightGray p-3"
name="numberOfExercices"
>
{numberOfExercices(10)}
</Field>
</div>
</>
);
};
const addMuscleToProgram = () => {
const container = document.getElementById("container");
if (container) container.appendChild(<DisplayMuscleInProgram />);
};

Answer 1

只是试图给出另一种方法。添加一个新的状态来保存肌肉程序的编号

const [muscleProgram, setMuscleProgram] = useState(1)

然后根据程序的编号添加组件。

<div id="container">
{[...Array(muscleProgram)].map((n, i) =>
<DisplayMuscleInProgram />
)}
</div>
<button
onClick={() => setMuscleProgram(muscleProgram+1)}
type="button"
className="rounded-md border">
Add
</button>

Answer 2

将数字变量解析为字符串作为文档。createElement("option"(将值作为字符串，而不是元素类型