Question

我在之前的项目中使用了它，它运行得很好。我想也许state的{{1}}没有被设置，但是当我点击图片时它被设置为true。我将在下面发布代码。

如果您需要更多信息而不是垃圾邮件，请告知我们，帮助创建一个更好的社区：）

showModal

编辑：模式显示在import React, { Component } from 'react'; import { Modal } from 'react-bootstrap'; class Gallery extends Component { constructor(props) { super(props); this.state = { showModal: false }; } render() { console.log(this.state); const { gallery } = this.props; return ( <section id="gallery" className="three"> <div className="container"> <header> <h2>{gallery ? gallery.title : 'Select A Gallery'}</h2> </header> <div className="card-deck"> {gallery ? gallery.images.map((image, i) => ( <div key={i} className="card"> <img onClick={() => { this.setState({ showModal: true }); }} className="card-img" src={`${image}=s1000-c`} alt="Card image cap" /> </div> )) : null} </div> <Modal bsSize="sm" show={this.state.showModal} onHide={() => this.setState({ showModal: false })} > <Modal.Header closeButton> <Modal.Title>Purchase Item</Modal.Title> </Modal.Header> <Modal.Body>Hello</Modal.Body> </Modal> </div> </section> ); } } export default Gallery;这里有两张图片显示：

Answer 1

你的代码似乎没问题（见下文如何运行得很好）我唯一能想到的是您忘记在页面中加入bootstrap css文件你看，react-bootstrap没有注入实际的css，它只是用css类名生成组件。

const {Modal} = ReactBootstrap;
const gry = {
  images: [
    'http://via.placeholder.com/350x150',
    'http://via.placeholder.com/350x150',
    'http://via.placeholder.com/350x150',
  ]
};


class Gallery extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showModal: false
    };
  }

  btnClick = () => {
    this.setState({ name: 'Sarah' });
  }

  render() {
    console.log(this.state);
    const { gallery } = this.props;
    return (
      <section id="gallery" className="three">
        <div className="container">
          <header>
            <h2>{gallery ? gallery.title : 'Select A Gallery'}</h2>
          </header>
          <div className="card-deck">
            {gallery
              ? gallery.images.map((image, i) => (
                <div key={i} className="card">
                  <img
                    onClick={() => {
                      this.setState({ showModal: true });
                    }}
                    className="card-img"
                    src={`${image}`}
                    alt="Card image cap"
                  />
                </div>
              ))
              : null}
          </div>
          <Modal
            bsSize="sm"
            show={this.state.showModal}
            onHide={() => this.setState({ showModal: false })}
          >
            <Modal.Header closeButton>
              <Modal.Title>Purchase Item</Modal.Title>
            </Modal.Header>
            <Modal.Body>Hello</Modal.Body>
          </Modal>
        </div>
      </section>
    );
  }
}

ReactDOM.render(<Gallery gallery={gry} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.5/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<div id="root"></div>

修改
作为您更新的问题的后续内容，根据您的屏幕截图，就反应引导或反应而言，一切都很好。你需要检查你的标记和样式，看看隐藏它的是什么。

尝试将其与我的示例进行比较（检查.modal-backdrop .fade .in）：

即使在showModal设置为true之后，React-bootstrap模式也不会弹出

1 个答案: