Question

在我的React项目中，我的App.js中包含以下内容：

例如：

<GameStats />
<UserStats />

当我的套接字有数据时，

UserStats.js 和 GameStats.js 将打开。

在 GameStats.js 模式中，有用户列表，当单击用户名时，将打开 UserStats.js 模式。现在我想知道，当 UserStats.js模态打开时，如何关闭 GameStats.js模态？我不能使用setState，因为组件很简单。

有没有办法用redux做到这一点？

这是我的示例代码：

GameStats.js：

class GameStats extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }
  handleShow() {
      this.setState({ show: true });
  }
  handleClose() {
      this.setState({ show: false});
  }
  componentDidMount() {
    Socket.on("message", data => this.example(data));
  }
  handleInfo() {
    //Send Request to Socket. then the response will be open in UserStats.js modal
    //socket.emit('userInfo', 1);
  }
  render() {
    return (
      <>
        <Modal
          size="lg"
          show={this.handleShow}
          onHide={this.handleClose}
          aria-labelledby="st-lg-modal"
        >
          <Modal.Header closeButton>
            <Modal.Title id="st-lg-modal">GameStats</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <a href="#" onclick={() => this.handleInfo()}>
              Leon
            </a>
          </Modal.Body>
        </Modal>
      </>
    );
  }
}

UserStats.js：

class UserStats extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }
  handleShow() {
      this.setState({ show: true });
  }
  handleClose() {
      this.setState({ show: false});
  }
componentDidMount() {
    socket.on("userInfo", data => this.example(data));
}
  render() {
    return (
      <>
        <Modal
          size="lg"
          show={this.handleShow}
          onHide={this.handleClose}
          aria-labelledby="st-lg-modal"
        >
          <Modal.Header closeButton>
            <Modal.Title id="st-lg-modal">UserStats</Modal.Title>
          </Modal.Header>
          <Modal.Body>
                  Contents
          </Modal.Body>
        </Modal>
      </>
    );
  }
}

另外，这是我的 index.js 内容：

class App extends React.Component {
    render() {
        return (
            <Router>
                <div>
                         <UserStats />
                         <GameStats />
                        <Route exact path="/" component={Game} />
                </div>
            </Router>
        );
    }
}

在模态中打开一个新模态并关闭上一个模态

0 个答案: