Javascript 使用react将子组件追加到HTML中

我想做这样的事情，但我必须做出反应。我已经找到了一些解决方案，其中谈到使用道具，但没有一个对我有效。 基本上，我想做的是以这种方式将子组件添加到父节点，但在React。。。。有什么想法吗？谢谢

函数添加（k）{
var div=document.getElementById（“div-”+k）；
var elm=“text”；
第二部分插入相邻的TML（“之前”，elm）；
}

添加
加B
加C

有点长。这就是你要找的吗

<div className="row">
        <Column data="A" bgColor="blue" />
        <Column data="B" bgColor="green" />
        <Column data="C" />
</div>

更新2：使用挂钩

功能栏（道具）{
const[count，setCount]=React.useState（0）；
让新元素=[]；
for（设i=0；i
添加{props.data}
{newElements}
);
}

更新：要在单击时创建多个元素

从“React”导入React；
类列扩展了React.Component{
状态={
补遗：错误，
点击次数：0
};
onClick=（）=>{
this.setState（prevState=>({
增编：对，
clickedCount:prevState.clickedCount+1
}));
};
getChildren=（）=>{
让内容=[]；
console.log（this.state.clickedCount）；
for（设i=0；i

以下操作将只创建一个子项

//Column.js
从“React”导入React；
类列扩展了React.Component{
状态={
addlementclicked:false
};
onClick=（）=>{
这是我的国家({
addlementclicked：真
});
};
render（）{
返回this.state.addlementclicked(
添加{this.props.data}
文本
) : (
添加{this.props.data}
);
}
}
导出默认列；

有点长。这就是你要找的吗

<div className="row">
        <Column data="A" bgColor="blue" />
        <Column data="B" bgColor="green" />
        <Column data="C" />
</div>

更新2：使用挂钩

功能栏（道具）{
const[count，setCount]=React.useState（0）；
让新元素=[]；
for（设i=0；i
添加{props.data}
{newElements}
);
}

更新：要在单击时创建多个元素

从“React”导入React；
类列扩展了React.Component{
状态={
补遗：错误，
点击次数：0
};
onClick=（）=>{
this.setState（prevState=>({
增编：对，
clickedCount:prevState.clickedCount+1
}));
};
getChildren=（）=>{
让内容=[]；
console.log（this.state.clickedCount）；
for（设i=0；i

以下操作将只创建一个子项

//Column.js
从“React”导入React；
类列扩展了React.Component{
状态={
addlementclicked:false
};
onClick=（）=>{
这是我的国家({
addlementclicked：真
});
};
render（）{
返回this.state.addlementclicked(
添加{this.props.data}
文本
) : (
添加{this.props.data}
);
}
}
导出默认列；

类MyColumn扩展了React.Component{
状态={count:0}；
建造师（道具）{
超级（道具）；
this.add=this.add.bind（this）；
}
render（）{
常量innerItems=[]；
for（设i=0；i（{count:state.count+1}））；
}
}
常量行=(
);
render（行，document.getElementById（'app'）


类MyColumn扩展了React.Component{
状态={count:0}；
建造师（道具）{
超级（道具）；
this.add=this.add.bind（this）；
}
render（）{
常量innerItems=[]；
for（设i=0；i（{count:state.count+1}））；
}
}
常量行=(
);
render（行，document.getElementById（'app'）

这将是一个漫长的过程。我会在组件中执行类似的操作。在每次单击时创建一个数组，然后<代码>{clicksArray.map（item=>test）}
我一直在考虑将要添加到子数组的元素追加到子数组中这是一个漫长的过程。我会在组件中执行类似的操作。在每次单击时创建一个数组，然后<代码>{clicksArray.map（item=>test）}

我一直在考虑将元素添加到子数组中，这非常接近！但和原来的不太一样。您的解决方案只添加一个

文本