如何调用函数来控制其他组件的状态？

Question

我尝试制作弹出组件，并通过状态控制弹出状态。

import React, { Component } from 'react';

class Popup extends Component {
  constructor(props) {
    super(props);
    this.state = { popup: null };
  }

  popupOff = () => {
    this.setState({ popup: null });
  };
  popup1 = () => {
    this.setState({ popup: 'popup1' });
  };
  popup2 = () => {
    this.setState({ popup: 'popup2' });
  };
  popup3 = () => {
    this.setState({ popup: 'popup3' });
  };
  popup4 = () => {
    this.setState({ popup: 'popup4' });
  };
  popup5 = () => {
    this.setState({ popup: 'popup5' });
  };
  popup6 = () => {
    this.setState({ popup: 'popup6' });
  };

  render() {
    if (this.state.popup != null) {
      return (
        <div className="popup-screen">
          <div className="frame">
            <div className="popup-close" onClick={this.popupOff}>
              ×
            </div>
            {this.state.popup === 'popup1' && <popup1 />}
            {this.state.popup === 'popup2' && <popup2 />}
            {this.state.popup === 'popup3' && <popup3 />}
            {this.state.popup === 'popup4' && <popup4 />}
            {this.state.popup === 'popup5' && <popup5 />}
            {this.state.popup === 'popup6' && <popup6 />}
          </div>
        </div>
      );
    } else return null;
  }
}

export default Popup;

我的应用程序的结构是如此复杂，因此我必须像全局方法或其他方法一样调用这些函数。实际上，我正在尝试从另一个组件控制状态。所以不用这些功能就可以控制状态