Question

我正在关注bootstrap模式的this教程。这是我的代码：

import React, { Component } from 'react';
import { Modal } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import { Popover } from 'react-bootstrap';
import { OverlayTrigger } from 'react-bootstrap';
import { Tooltip } from 'react-bootstrap';

class Login extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      show: false
    };

    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleClose() {
    this.setState({ show: false });
  }

  handleShow() {
    console.log("Show")
    this.setState({ show: true });
  }

  render() {
    const popover = (
      <Popover id="modal-popover" title="popover">
        very popover. such engagement
      </Popover>
    );
    const tooltip = <Tooltip id="modal-tooltip">wow.</Tooltip>;

    return (
      <div>
        <p>Click to get the full Modal experience!</p>

        <Button bsStyle="primary" bsSize="large" onClick={this.handleShow}>
          Launch demo modal
        </Button>

        <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Text in a modal</h4>
            <p>
              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
            </p>

            <h4>Popover in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={popover}>
                <a href="#popover">popover</a>
              </OverlayTrigger>{' '}
              here
            </p>

            <h4>Tooltips in a modal</h4>
            <p>
              there is a{' '}
              <OverlayTrigger overlay={tooltip}>
                <a href="#tooltip">tooltip</a>
              </OverlayTrigger>{' '}
              here
            </p>

            <hr />

            <h4>Overflowing text to show scroll behavior</h4>         
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.handleClose}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

export default Login;

我的问题是，当我点击＆＃34;启动演示模式＆＃34; - 按钮未显示模态。我检查了在控制台中是否有＆＃34;布局＆＃34;的布尔值。单击它时，它被设置为true，但无论如何都不会显示模态。

这是应用程序的入口点：

import Login from './Components/Modal/Login';
class App extends Component {

  render() {
    return (
      <div className="App">       
        <Login/>
      </div>
    );
  }
}

export default App;

我试图弄清楚好几个小时，但我不知道。我甚至在一点上使用了与教程完全相同的代码，但没有运气。任何帮助都是有意义的。

Answer 1

您可以使用＆amp;＆amp ;;来显示模态具有如下状态的运营商。我已将show prop移除到模态。尝试以下方法它将起作用

   {this.state.show && (
            <Modal onHide={this.handleClose}>
              ...... // place remaining code here
            </Modal>
    )}

Answer 2

查看Conditional Rendering With React

可能很有用

:-)

render () {
  return (
    <div>
      {this.state.show ? /*Your component*/ : null /*Or another component*/}
    </div>
  )
}

旁注：采用这种方法意味着您的Modal组件首先未实例化this.state.show为假，这可能是有益的应用程序速度。如果您将show prop传递到Modal，这意味着Modal正在被实例化，并且正在应用一些不需要的逻辑。

Answer 3

您忘了添加style.css文件。在下面添加指向index.html文件的链接。

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

编辑1：
或没有CDN（在index.html上）

import 'bootstrap/dist/css/bootstrap.css';

模态未显示

3 个答案: