[英]create new div onClick in React
I need to create new empty div onClick every time not once, is it right way to do this in react, I just doubt if it is correct to do this in react我需要创建新的空 div onClick 每次不是一次,在反应中这样做是否正确,我只是怀疑在反应中这样做是否正确
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>
);
}
Try to use react createElement method instead of using appendChild directly.尝试使用 react createElement方法而不是直接使用appendChild 。 Add new element in array and then display this array in the JSX.
在数组中添加新元素,然后在 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> ); }
Here is the stackblitz example .这是stackblitz 示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.