将 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() {&nbsp; const [buttonsOnCanvos, setButtonsOnCanvos] = useState([]);&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; &nbsp; event={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setButtonsOnCanvos([...buttonsOnCanvos, <Button />]);&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; <div className="canvos">{buttonsOnCanvos}</div>&nbsp; &nbsp; </div>&nbsp; );}

Answer 2

您不需要直接访问 DOM。您可以有一个状态来指示是否显示元素。然后，有条件地在 div 中呈现 。.canvos<Button />export default function App() {&nbsp; const [showCanvos, setShowCanvos] = useState(false);&nbsp; const addToCanvos = () => {&nbsp; &nbsp; setShowCanvos(true)&nbsp; };&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <Button event={addToCanvos} />&nbsp; &nbsp; &nbsp; <div className="canvos">&nbsp; &nbsp; &nbsp; &nbsp; {showCanvos && <Button />}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );}请注意，我将该函数移到了组件中。addToCanvosApp