Question

我试图使用react-model组件，但bootstrap正在弄乱它。当我把它放在带有col类的div之外时它工作得很好但是分开它会弄乱布局。这里是我使用模态的组件。

class BeerItem extends Component {
constructor(props){
  super(props);
  this.state = {
    showModal: false,
  };
}

handleOpenModal = () => {
  this.setState({ showModal: true });
}

render(){
  Modal.setAppElement('#root');
  return (
    <div key={this.props.beer.id} className="col-sm-8 col-md-4 m-3 beer-item col-xl-3 text-center" onClick={this.handleOpenModal}>
      <div className="d-flex align-items-center justify-content-center hvr-rotate">
          <div className="img-container">
            <img src={this.props.beer.image_url} alt=""/>
          </div>
        <div className="beer-nametag">
          <p className="h5 font-weight-bold beer-card-name">{this.props.beer.name}</p>
          <p className="text-secondary">{this.props.beer.tagline}</p>
        </div>
      </div>
      <Modal 
        className="modal"
        isOpen={this.state.showModal}
        onRequestClose={ () => this.setState({ showModal: false }) }
        shouldCloseOnOverlayClick={true}
        ariaHideApp={false}
      >
        {this.props.beer.name}
    </Modal>
    </div>
  )
}
}

这是在列表组件中呈现的项目组件。我试图将模态放在列表组件中，但后来我不知道如何将啤酒ID传递给它。该列表位于无限滚动组件中，当我想通过将一个函数传递给项目组件来更新列表中的状态时，该组件获取点击啤酒的id我得到一个错误，最大深度超过...

Answer 1

您可以使用<React.Fragment>，因此您不会使用额外的<div>包装组件。
许多模态在视图窗口关闭时呈现（出于动画目的）。但是，您可能希望在关闭事件后将其从DOM中完全删除。

经过测试的代码。请注意，Modal是根据this.state.showModal条件有条理呈现的：

const MyModal = props => (
  <Modal
    className="modal"
    isOpen
    onRequestClose={props.onClose}
    shouldCloseOnOverlayClick
    ariaHideApp={false}
  >
    {props.beer.name}
  </Modal>
);

class BeerItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false,
    };
  }

  handleOpenModal = () => {
    this.setState({ showModal: true });
  };

  onModalClose = () => {
    this.setState({ showModal: false });
  };

  render() {
    return (
      <React.Fragment>
        <div onClick={this.handleOpenModal}>Click me</div>
        {this.state.showModal && <MyModal onClose={this.onModalClose} beer={{name: "Beer"}} />}
      </React.Fragment>
    );
  }
}

React-modal与bootstrap无法正常工作

1 个答案: