动态地向DIV或其他React中添加react组件
动态地向DIV或其他React中添加react组件
提问于 2020-06-11 14: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 15: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 14: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
复制相关文章
点击加载更多
相似问题
如何动态地向DOM添加react组件？
如何在react中向div添加组件？
向rails react组件包装div添加样式
根据状态动态地向react页面添加组件
使用Rails布局动态地向React组件添加子组件吗？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
