Question

我根据以下基本示例定义了一个模态组件：
https://react-bootstrap.github.io/components/modal/

我的挑战是在点击整个应用程序中其他组件中声明的链接时显示它。

感谢您的时间和帮助。

Answer 1

您需要lift the state您的组件。像这样的东西

class Parent extends React.Component {
  constructor() {
    super();
    this.state = { showModal: false };
  }

  displayModal() {
    this.setState({showModal: true});
  }

  render() {
    return <Child showModal={this.state.showModal} onButtonClick={this.displayModal.bind(this)}
  }
}

对于孩子：

class Child extends React.Component {

  render() {
    return (
      <div>
        <Button onClick={this.props.onButtonClick}>
        <Modal open={this.props.showModal} onHide={...}>
          ...
        </Modal>
      </div>
    );
  }
}

Answer 2

在最顶层的组件层次结构中导入模态代码，并在redux状态下存储一些modalStatus（如果使用的是redux）并根据redux状态中的modalStatus值显示或取消显示模态。

如果不使用redux，任何其他州经理都会有类似的范例

如果没有使用任何状态管理器，那么很可能你的应用程序很小，只需将modalStatus保持在父组件的状态并将回调传递给各个组件

在reactjs中显示模态窗口

2 个答案: