import SingleInvite from "./SingleInvite";
我导入了一个我创建的组件,但是我总是在SingleInvite组件的位置上得到[Object object
const newInvite = () => {
const container = document.querySelector(".container");
if (container) {
container.innerHTML += `${(<SingleInvite index={index} />)}`;
}
};
<div>
呼叫新邀请
<div className="container">
<SingleInvite index={0} />
</div>
<button className="add-another" onClick={newInvite}>
<img src={plus} className="plus" alt="" /> Add another
</button>
2条答案
按热度按时间rfbsl7qr1#
作为回应,你不应该直接修改dom。相反,你应该创建一个或多个状态变量,并在你想要重新渲染的时候改变这些状态。在你的例子中,因为你想要1-N个
<SingleInvite>
,最自然的状态是一个数组。我不确定你需要数组中的每个元素的数据,所以我只给予它们一个唯一的标识符。如果你确定除了邀请数量之外不需要任何其他数据,你可以使用一个数字来表示状态。尽管大多数现实世界的例子都有一点复杂,所以你需要使用如上所示的数组方法。
下面是一个以数字作为状态的示例:
6yt4nkrj2#
使用React时,应该避免直接操作DOM,因为这违背了所有React原则。
您可能需要阅读以下文档:conditional rendering with React
看起来您正在尝试在onClick容器中呈现newInvite组件。更好的方法是: