用于动态显示图像的React模式

Question

我正在使用react构建一个应用程序，我有一个动态显示所有图像的页面。当我点击的时候，我希望这些图片在react-modal模式下打开。如何设置要显示的图像的模式

我应该在模式中设置什么属性才能使其应用于所有图像

Answer 1

class ImageModal extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }

  setModalState(showModal) {
    this.setState({
      showModal: showModal
    });
  }

  render() {
    return (
      <div>
        <img src={ this.props.src } onClick={ this.setModalState.bind(this, true) } />
        <ReactModal isOpen={ this.state.showModal }>
          <img src={ this.props.src } onClick={ this.setModalState.bind(this, false) } />
        </ReactModal>
      </div>
    )
}