如何用appendChild方法追加react组件
如何用appendChild方法追加react组件
提问于 2021-03-24 16:29:21
我必须使用下面的组件超过1次。
const OnePen = (props) => {
return (
<div className="cerd" key={props.ID}>
<div className=" card-body">
<h2 className="card-title">{props.title}</h2>
<p className="card-text">{props.desc}</p>
</div>
</div>
);
};
export default OnePen;使用上面的组件，下面的代码运行良好，完成了完美的工作。
import OnePen from "./OnePen";
const PensList = ({ pens }) => {
return (
<>
<div id="mainPen" className=" wrapper">
{pens.map((pen) => (
**<OnePen ID={pen.id} title={pen.title} desc={pen.description}></OnePen>**
))}
</div>
</>
);
};
export default PensList;但是，下面的代码不起作用，因为它说明附加了appendChild的元素的类型应该是Node。当我使用react- create -element创建相同的组件时，它工作得很好，但我不需要一遍又一遍地做，我想重用相同的组件。
这是有问题的代码...注释代码可以完成这项工作，但我不需要像这样创建它。我不得不追加
const handleSubmit = (e) => {
e.preventDefault();
const pen = { title, description };
axios.post("http://localhost:5000/addPen", pen).then((res) => {
if (res.status === 200) {
// const div1 = document.createElement("div");
// div1.className = "cerd";
// const key = document.createAttribute("key");
// key.value = res.data._id;
// const div2 = document.createElement("div");
// div2.className = "card-body";
// const h2 = document.createElement("h2");
// h2.className = "card-title";
// h2.innerHTML = res.data.title;
// const p = document.createElement("p");
// p.className = "card-text";
// p.innerHTML = res.data.description;
// div2.appendChild(h2);
// div2.appendChild(p);
// div1.appendChild(div2);
**document
.getElementById("mainPen")
.appendChild(
<OnePen ID={res.data._id} title={res.data.title} desc={res.data.description}></OnePen>
);**
}
});
};
return (
//some code
);
};
export default CreatePen;感谢您的考虑
回答 1
Stack Overflow用户
发布于 2021-03-24 18:41:32
这就是你可以采用的方法。
如果您有API，请创建一个端点以从中提取数据(所有笔或特定笔)。然后，您可以创建一个使用axios.get()获取数据并将其放入状态变量的组件。如果您将此代码放在useEffect()钩子中，数据将在组件加载时获取。
// state for your pens
const [pens, setPens] = useState([]);
// fetch on load
useEffect(() => {
axios
.get("http://localhost:5000/getPens") // set to your endpoint
.then((response) => {
setPens(response.data);
})
.catch((error) => {
console.log(error);
});
}, []);然后，可以像之前一样通过映射来渲染画笔，以显示所有画笔，也可以显示单个画笔。
/***********
* Render
***********/
const pensDisplay = pens.map((p, i) => {
return (
<div key={i}>
{/* for example */}
<p>{p.size}</p>
</div>
);
});
return (
<div>
<h3>Pens</h3>
{pensDisplay}
</div>
);在React中，你应该避免使用appendChild()之类的东西，并尽可能多地使用"React“的方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66777285
复制相关文章
相似问题
腾讯云开发者
