Javascript 反应引导模式es6

您好，我需要帮助显示引导模式

 import React from 'react';
    import styles from '../App.css';
    import styles from '../../../public/css/app.css';

    import Button from 'react-bootstrap/lib/Button';
    import Modal from 'react-bootstrap/lib/Modal';


    export default class Edit extends React.Component {
      constructor(props) {
    super(props);

    console.log(props)

    this.state=  { showModal: false };

    this.state = {showModal:true};
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
    }


    close() {
      this.setState({ showModal: false });
    }

    open() {
      alert("open modal")
      this.setState({ showModal: true });
    }


    render() {

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

        <Button
          bsStyle="primary"
          bsSize="large"
          onClick={this.open.bind(this)}
        >
          Launch demo modal
        </Button>

        <Modal show={this.state.showModal} onHide={this.close}>
          <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>

            <hr />

            <h4>Overflowing text to show scroll behavior </h4>
            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.close}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>

    );
  }
  }

从“React”导入React；
从“../App.css”导入样式；
从“../../../public/css/app.css”导入样式；
从“react bootstrap/lib/Button”导入按钮；
从'react bootstrap/lib/Modal'导入模态；
导出默认类编辑扩展React.Component{
建造师（道具）{
超级（道具）；
控制台日志（道具）
this.state={showmodel:false}；
this.state={showmodel:true}；
this.open=this.open.bind（this）；
this.close=this.close.bind（this）；
}
关闭（）{
this.setState（{showmodel:false}）；
}
开（）{
警报（“打开模式”）
this.setState（{showmodel:true}）；
}
render（）{
返回(
单击以获得完整的模态体验

启动演示模式
模态标题
情态语篇
莫利斯夫妇，最不常见的是卢克图斯夫妇


溢出文本以显示滚动行为
这是一个不可分割的区域。这是一个巨大的区域，一个不可分割的区域。这是一个不可分割的区域

接近
);
}
}

模态没有显示任何建议

---

我遵循了react引导文档和babel es6建议。

如果您最终想要在react应用程序中再次使用引导，只需使用react引导即可。

有任何错误消息吗？因为您将

ture

设置为与

类似的模式，所以模式将首先显示。它有效吗？开始显示？没有错误消息我在文档中修复了它。除了顶部的双重样式声明之外，我看不出有任何错误。你应该改变他们的名字，这样他们就不会冲突了。我知道您正是从react引导文档中使用这一点的，但您是否确认在呈现组件时，this.state.showmodel是正确的？非常感谢各位！我最后把图书馆给甩了。