React - 仅允许存在组件的单​​个实例

Question

我正在尝试建立一个反应功能。

问题是这样的：我有三个组件ComponentA，ComponentB，ComponentC。 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>
    );
  }
}

我尝试构建一种方法来卸载ComponentC的任何实例（如果存在），无论何时挂载但都无法成功。

Answer 1

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

class MyApp extends React.Component {
  constructor() {
    super();
    this.state = {
      showA: false,
      showB: false
    };
  }
  
  toggleA = () => {
    if(document.getElementById("component_c") && !this.state.showA) return;
    this.setState((prevState) => ({showA: !prevState.showA}));
  }
  
  toggleB = () => {
    if(document.getElementById("component_c") && !this.state.showB) return;
    this.setState((prevState) => ({showB: !prevState.showB}));
  }
 
  render() {
    return(
      <div>
        <div>
          <button onClick={this.toggleA}>Show/Hide A</button>
          <button onClick={this.toggleB}>Show/Hide B</button>
        </div>
        {this.state.showA && <ComponentA />}
        {this.state.showB && <ComponentB />}
      </div>
    );
  }
}

class ComponentA extends React.Component {
  render() {
    return (
      <ComponentC parent="A" />
    );
  }
}

class ComponentB extends React.Component {
  render() {
    return (
      <ComponentC parent="B" />
    );
  }
}

class ComponentC extends React.Component {
  render() {
    return (
      <div id="component_c">{"This is ComponentC, rendered from component" + this.props.parent}</div>
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>