在React中创建新的div onClick

Question

我需要每次都创建新的空div onClick而不是一次，在react中这样做是否正确，我只是怀疑在react

中这样做是否正确

import "./styles.css";
export default function App() {
const parentRef = useRef();
const createNewDiv = () => {
parentRef.current.appendChild(document.createElement("div"));
};
return (
<div className="App">
<div onClick={createNewDiv} ref={parentRef}>
clickHere
</div>
</div>
);
}

Answer 1

尝试使用reactcreateElement方法而不是使用appendChild直接。在数组中添加新元素，然后在JSX中显示该数组。

import React, { useRef, useState } from "react";
import "./style.css";
export default function App() {
const parentRef = useRef();
const [elements, setelements] = useState([]);
const createNewDiv = () => {
// parentRef.current.appendChild(document.createElement("div"));
const newElement = React.createElement('div', {key: 'ele'+ new Date().getTime()}, `Hello`,);

setelements(elements => [...elements,newElement]);
};
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
<div onClick={createNewDiv} ref={parentRef}>
clickHere
</div>
{
elements
}
</div>
);
}

这是stackblitz的例子。