将 React 组件动态添加到 DIV 或其他反应应用中

Question

上下文我正在尝试根据事件 f.g onClick 事件将 React 组件动态添加到 DIV/另一个 React 组件中。我尝试过并且知道我可以通过JS将任何HTML元素添加到DIV中，只需创建元素并附加到DIV中即可。但我想将 react 组件添加到 DIV 中。问题：当我将 React 组件追加到 DIV 中时，它将添加 [对象对象]，我正在寻找一种方法来呈现和插入 React 组件到 DIV 中。这是代码沙箱 ： https://codesandbox.io/s/frosty-bouman-f95mx?file=/src/App.js    import React from "react";    import "./styles.css";    import Button from "./Button";    const addToCanvos = () => {      var canvos = document.querySelector(".canvos");      canvos.append(<Button />);    };    export default function App() {      return (        <div className="App">          <Button event={addToCanvos} />          <div className="canvos" />        </div>      );    }

Answer 1

查看此实现。基本上，您需要使用 useState React Hook 来存储要添加为画布子级的所有组件。

export default function App() {

  const [buttonsOnCanvos, setButtonsOnCanvos] = useState([]);

  return (

    <div className="App">

      <Button

        event={() => {

          setButtonsOnCanvos([...buttonsOnCanvos, <Button />]);

        }}

      />

      <div className="canvos">{buttonsOnCanvos}</div>

    </div>

  );

}

Answer 2

您不需要直接访问 DOM。您可以有一个状态来指示是否显示元素。然后，有条件地在 div 中呈现 。.canvos<Button />

export default function App() {

  const [showCanvos, setShowCanvos] = useState(false);

  const addToCanvos = () => {

    setShowCanvos(true)

  };

  return (

    <div className="App">

      <Button event={addToCanvos} />

      <div className="canvos">

        {showCanvos && <Button />}

      </div>

    </div>

  );

}

请注意，我将该函数移到了组件中。addToCanvosApp