动态将React组件添加到DIV或另一个React应用程序中

Question

CONTEXT

我正在尝试基于事件 (例如 onClick 事件) 动态将 React 组件添加到 DIV / 另一个 React 组件中。

我已经尝试并知道可以通过 JS 创建 createElement 并将其附加到 DIV 中来添加任何 HTML 元素。但是，我想要添加 React 组件到 DIV 中。

问题：

当我将 React 组件添加到 DIV 中时，它会添加 [object Object]。我正在寻找一种方法来能够渲染并插入 React 组件到 DIV 中。

这里是 CodeSandBox 的代码：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>
      );
    }

- AJ-

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>
  );
}

- Matthew Howard

---

这个解决方案太棒了。谢谢！你觉得如果我们有不同的组件并且想同时添加它们，这个方法可行吗？ - undefined

如果你想添加多个组件，只需将更多的项目添加到数组中：setButtonsOnCanvos([...buttonsOnCanvos, <Component1 />, <Component2 />]);如果你想移除项目，请将数组设置为空：setButtonsOnCanvos([]) - undefined

Answer 2

你不需要直接访问 DOM。你可以有一个状态来指示是否显示 .canvos 元素。然后根据条件在 div 中渲染 <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>
  );
}

注意我将addToCanvos函数移动到App组件中。

- Mubaraq Wahab

---

我的主要目标是能够显示几个React组件，并允许用户将它们添加到DIV中并设置在该DIV上的位置，类似于拖放功能。但是对于我的第一个简单任务，我通过点击组件来添加它们。再次从一个按钮开始。 - undefined

抱歉，我不明白。你是想在点击一次后将100个按钮添加到这个div中吗？ - undefined

是的，如果用户点击添加按钮，可以将React组件添加到DIV DOM中。 - undefined

const Div=document.createElement("div"); const BTN=document.createElement("button"); BTN.innerHTML="你好世界！"; Div.append(BTN); document .querySelector(".div2") .append(); };``` - undefined

但是，我想要将React组件添加到DIV的子域中，而不是使用上述代码。 - undefined