Javascript 单击按钮将组件添加到另一个组件

我正在创建一个页面，如果用户单击

addmore

按钮，则应在用户单击的次数内添加一个文本框

我已经创建了一个组件，我在其中创建了

texbox

。我试图在单击按钮时将此组件渲染为另一个组件，但它不起作用。为什么?

---

class Addmore扩展了React.Component{
render（）{
返回(
科科斯群岛
);
}
}
类abc扩展了React.Component{
建造师（道具）
{
超级（道具）；
}
状态={
addcomp:false
};
单击（）{
这是我的国家({
艾德康普：没错，
});
var x=document.getElementById（“更多”）；
x、 parentNode.appendChild（）；
}
render（）{
返回(
日分
//在这里，我必须渲染ADDMORE
组成部分
添加更多
);
}
}
导出默认abc；

您应该让React渲染所有内容，您的工作只是告诉React要渲染什么，以及在您的情况下，要渲染多少次

为此，可以使用

计数器

跟踪在

组件中应该“注入”多少动态添加的元素

---

这里需要一个思维转移，因为在您的示例中，您认为单击处理程序本身应该修改DOM，而在React中，这是一个反模式

---

您应该使用React状态，这意味着单击处理程序应该更新主机组件的状态，该状态将触发重新渲染（React就是这样工作的），并且在下一个渲染周期中，您添加的组件的渲染次数将与计数器值相同，因为计数器更改触发了重新渲染

在React中，props&state是触发重新渲染的方式，任何DOM修改都应该通过更改内部组件的状态或从父组件发送不同的props来完成

---

在下面的示例中，我没有使用类，而是使用，因为我已经在释放挂钩后完全停止使用类，因为我认为它更干净：

//获取一个钩子函数
const{useState，useCallback}=React；
//添加的元素组件
常量加法=（）=>
//“应用程序”组件
常量示例=（）=>{
const[count，setCount]=useState（0）；
返回
设置计数（计数+1）}>
点击我
{Array（count.fill（）}
};
//渲染
ReactDOM.render(
,
document.getElementById（“react”）
);

this。单击.bind（this）
-方法需要一个上下文参数。阅读MDN。在React中不能使用
appendChild
和
getElementById
。您可以修改DOM vaie道具，而不是直接修改。React处理DOM更改本身。
var x=document.getElementById（“更多”）-这不是react方法，而是创建另一个真正有用的组件，谢谢
class Addmore extends React.Component {
  render() {
    return (
      <div>
        <label className="float-left"> CC</label>
        <input type="text" class="form-control" />
      </div>
    );
  }
}

class abc extends React.Component {
    constructor(props)
    {
        super(props);
    }
  state = {
    addcomp: false
  };

  click() {
    this.setState({
        addcomp: true,
      });
     var x= document.getElementById("more");
     x.parentNode.appendChild(<Add/>);
  }
  render() {
    return (
            <div class="row">
            <div class="col-3">
            <label className="float-left"> BU</label>
             <input type="text" class="form-control" />


             <div id="more">

              //HERE I HAVE TO RENDER ADDMORE
                         COMPONENT

             </div>

             <div class="col-3">
                  <button type="button" onClick={this.click.bind()}>
                                Add more
                  </button>
             </div>
    );
  }
}
export default abc;