在 React 中創建新的 div onClick

Question

我需要創建新的空 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>
  );
}

Answer 1

嘗試使用 react createElement方法而不是直接使用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 示例。