React-modal無法與引導程序一起正常使用

Question

即時通訊試圖使用react-model組件，但引導程序將其弄亂了。 當我使用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>包裝組件。
• 關閉視圖窗口時，許多模態渲染將關閉（出於動畫目的）。 但是，您可能希望在close事件之后將其從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>
    );
  }
}