Javascript 反应-仅允许存在组件的单个实例

我正在尝试在react中构建一个功能

问题是这样的：我有三个组件A，组件B，组件C。ComponentC可以呈现为ComponentA或ComponentB的子级

我想要实现的是，在任何时间点，DOM中都只有一个ComponentC实例，可以是ComponentA或ComponentB的子实例，两者都始终存在

class ComponentA extends Component {
  render() {
    return (
      <ComponentC />
    );
  }
}

class ComponentB extends Component {
  render() {
    return (
      <ComponentC />
    );
  }
}

class ComponentC extends Component {
  render() {
    return (
      <div>This is ComponentC </div>
    );
  }
}

类组件扩展组件{
render（）{
返回(
);
}
}
类ComponentB扩展了组件{
render（）{
返回(
);
}
}
类ComponentC扩展了组件{
render（）{
返回(
这是ComponentC
);
}
}

---

我试图构建一种方法，在装入ComponentC的任何实例（如果存在）时，都可以将其卸载，但未能成功。

有几种方法可以做到这一点。想到的最简单的方法就是检查DOM是否存在所述节点。如果它存在，只需不渲染任何内容或阻止状态对其进行切换

MyApp类扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ 昭和：错， B:错 }; } toggleA=（）=>{ if（document.getElementById（“component_c”）&&！this.state.showA）返回； this.setState（（prevState）=>（{showA:！prevState.showA}））； } 切换b=（）=>{ if（document.getElementById（“component_c”）&&！this.state.showB）返回； this.setState（（prevState）=>（{showB:！prevState.showB}））； } render（）{ 返回( 显示/隐藏 显示/隐藏B {this.state.showA&&} {this.state.showB&&} ); } } 类ComponentA扩展了React.Component{ render（）{ 返回( ); } } 类ComponentB扩展了React.Component{ render（）{ 返回( ); } } 类ComponentC扩展了React.Component{ render（）{ 返回( {“这是ComponentC，从组件“+This.props.parent”渲染而来} ); } } ReactDOM.render（，document.getElementById（“app”）

也许这个软件包可以帮助您？singleton设计模式确保给定类只有一个实例。

ComponentA

和

ComponentB

是否共享相同的道具？还是他们小时候只共享组件CComponentC@VTodorov我会调查的，你能不能把两个组件中的一个隐藏起来（或设置为“空”状态）？它更接近我要找的东西，但不完全是这样，@VTodorov建议的singleton包是我需要的