动态地向DIV或其他React中添加react组件
动态地向DIV或其他React中添加react组件
提问于 2020-06-11 22:25:11
上下文
我正在尝试根据事件f.g onClick事件动态地将React组件添加到DIV/另一个React组件中。
我尝试并知道我可以通过JS将任何HTML元素添加到DIV中，只需通过createElement就可以添加到DIV中。但我想把反应组分加入到DIV中。
问题：
当我将React组件附加到DIV中时，它将添加Object对象，我正在寻找一种能够在DIV中呈现和插入React组件的方法。
这是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>
);
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-06-11 23:08:38
签出这实现。基本上，您需要使用useState React来将您想要添加的所有组件存储为画布的子组件。
export default function App() {
const [buttonsOnCanvos, setButtonsOnCanvos] = useState([]);
return (
<div className="App">
<Button
event={() => {
setButtonsOnCanvos([...buttonsOnCanvos, <Button />]);
}}
/>
<div className="canvos">{buttonsOnCanvos}</div>
</div>
);
}Stack Overflow用户
发布于 2020-06-11 22:34:28
您不需要直接访问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组件中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62334553
复制相关文章
相似问题
腾讯云开发者
