带有 reactstrap NavbarToggler、DropdownToggle、Modal 的 Gatsby JS...在“gatsby build”之后不工作

Question

我正在尝试将 reactstrap 与 gatsbyJS 一起使用。

它在运行ning gatsby develop 时完美运行，但当我运行 gatsby build 并打开生成的动画（如打开下拉菜单、切换导航栏、模态）时停止工作index.html：点击它们时没有任何反应:(

重现简单：

gatsby new gatsby-site
cd gatsby-site/
npm install bootstrap --save
npm install --save reactstrap react react-dom

然后在src/pages/index.js中添加navbar and/or modal（见下面的代码）。然后运行 gatsby develop，一切都应该完美。然后运行 gatsby build，一旦生成打开 public/index.html 并尝试切换、下拉、模式，它不再工作了:(

有什么想法吗？与 jquery 或 PopperJS 有关？非常感谢

index.js 文件:

import React from 'react'
import Link from 'gatsby-link'
import 'bootstrap/dist/css/bootstrap.min.css'
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from 'reactstrap';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class NavbarExample extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
              </NavItem>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Options
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>
                    Option 1
                  </DropdownItem>
                  <DropdownItem>
                    Option 2
                  </DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>
                    Reset
                  </DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }

  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

const IndexPage = () => (
  <div>
    <NavbarExample />
    <ModalExample buttonLabel="Launch Modal" />
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <Link to="/page-2/">Go to page 2</Link>
  </div>
)

export default IndexPage

Answer 1

实际上它在工作...但仅当将 public/ 文件夹内容拖放到服务器根目录或特定路径时。对于后者，不要忘记在 gatsby-config.js:

中指定 path prefix

module.exports = {
  pathPrefix: `/my-path`,
}

带有 reactstrap NavbarToggler、DropdownToggle、Modal 的 Gatsby JS...在“gatsby build”之后不工作

Gatsby JS with reactstrap NavbarToggler, DropdownToggle, Modal... not working after `gatsby build`

reactjs

gatsby

reactstrap