Javascript 在不同的html元素中反应呈现组件

我是个新手。我想有两个按钮，在我的页面上同一个div中的两个组件之间切换渲染。我从以下几点开始：

class NewComponent1 extends React.Component {
    render() {
        return (
           <div {...this.props}>
            new component1
           </div>
        );
    }
}
class NewComponent2 extends React.Component {
    render() {
        return (
           <div {...this.props}>
               new component2
           </div>
        );
    }
}
class Button1 extends React.Component {
    render() {
        return (
           <button {...this.props}>
               click1
           </button>
        );
    }  
}
class Button2 extends React.Component {
    render() {
        return (
          <button {...this.props}>
            click2
          </button>
        );
    }  
}
class App extends React.Component {
    constructor() {
        super();
        this.state = {
          clicked1: false,
          clicked2: false
        };
        this.handleClick1 = this.handleClick1.bind(this);
        this.handleClick2 = this.handleClick2.bind(this);
    }
    handleClick1() {
        this.setState({
            clicked1: true,
            clicked2: false
        });
    }
    handleClick2() {
     this.setState({
      clicked2: true,
      clicked1: false
   });
   }
   render() {
    return (
     <div>
      <Button1 onClick={this.handleClick1} />
      <Button2 onClick={this.handleClick2} />
      {this.state.clicked1 ? <NewComponent1 /> : null}
      {this.state.clicked2 ? <NewComponent2 /> : null}
    </div>
  );
  }
  };

  React.render(
  <App />,
  document.getElementById("root")
  );

classnewcomponent1扩展了React.Component{
render（）{
返回(
新组件1
);
}
}
类NewComponent2扩展了React.Component{
render（）{
返回(
新组件2
);
}
}
类Button1扩展了React.Component{
render（）{
返回(
点击1
);
}  
}
类按钮2扩展了React.Component{
render（）{
返回(
点击2
);
}  
}
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
clicked1:false，
clicked2：错误
};
this.handleClick1=this.handleClick1.bind（this）；
this.handleClick2=this.handleClick2.bind（this）；
}
handleClick1（）{
这是我的国家({
clicked1:true，
clicked2：错误
});
}
handleClick2（）{
这是我的国家({
clicked2：对，
clicked1：错误
});
}
render（）{
返回(
{this.state.clicked1？：null}
{this.state.clicked2？：null}
);
}
};
反应(
,
document.getElementById（“根”）
);

我推测的结果很简单。如果我按

Button1

我在div中用

id=“area”

渲染了

MyComponent1

，如果按

Button2

我在div中用

id=“area

渲染了

MyComponent2

，并且

MyComponent1

将不会渲染。等等反之亦然。如果存在

MyComponent1

，则在第页上呈现

MyComponent2

。 另外，

Button1

和

Button2

在其他div中使用

id=“root”

永久呈现。只能在具有

id=“area”

的div中进行切换

---

期待一些提示；）

对不起。。。你的问题是什么？

state

不是静态的：

App.state

如何在一个div中呈现按钮，并根据单击的按钮在另一个div中呈现连接？我编辑了一段代码。这些ID是在哪里定义的？我一个也看不见。我假设您知道HTML React生成的代码将位于ID=root的元素内部，您不能在它之外做任何事情，React就是这样工作的。