Question

我创建了一个React项目，我想在其上安装bootswatch主题。

主题是显示，但是使用js的某些组件不起作用。就像模式或下拉菜单一样。

我遵循那里的安装文档： -npm安装bootswatch -导入CSS文件

我也尝试安装引导程序，但没有结果，主题没有直接使用其组件。

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import '../node_modules/bootswatch/dist/lux/bootstrap.css';
import './index.css';
import './component/header.js';
import Header from './component/header.js'

class Structure extends React.Component{
    render() {
      return (
        <div className="structure">
          <Header/>
        </div>
      );
    }
  }

  ReactDOM.render(
    <Structure/>,
    document.getElementById('root')
    );

header.js：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Login from '../page/login-page.js';
import Consultation from '../page/consultation.js';
import Consulation2 from '../page/consultation2.js';
import Consulation3 from '../page/consultation3.js';
import Consulation4 from '../page/consultation4.js';
import Logo from '../img/logo.png';

export default class Header extends React.Component{
      render(){
        return (
          <Router>
              <nav className="navbar navbar-expand-lg navbar-light bg-light" >
                <img src={Logo} className="logo" alt="Logo" />
                <a className="navbar-brand" href="#"> Marie-France Group</a>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
                  <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse" id="navbarColor02">
                  <ul className="navbar-nav mr-auto">
                    <li className="nav-item active">
                      <Link className="nav-link" to="/Home">Home</Link>
                    </li>
                    <li className="nav-item">
                      <Link className="nav-link" to="/consultation">Consultation</Link>
                    </li>
                    <li className="nav-item">
                      <Link className="nav-link" to="/register">Register</Link>
                    </li>
                    <li className="nav-item">
                      <Link className="nav-link" to="/Login">Login</Link>
                    </li>
                  </ul>
                </div>
            </nav>

            <Route exact path="/Home" component={Home} /> 
            <Route exact path="/consultation" component={Consultation} />
            <Route path="/register" component={Register} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/consultation/2" component={Consulation2} />
            <Route exact path="/consultation/3" component={Consulation3} />
            <Route exact path="/consultation/4" component={Consulation4} />
         </Router>
        );
      }
  }

  function Home() {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
  }

  function Register() {
    return (
      <div>
        <h2>Register</h2>
      </div>
    );
  }

当我单击按钮以在移动设备上显示导航栏时，什么也没有显示。我对模态有同样的问题。

我想念安装步骤吗？当我的组件无法与主题配合使用时，我是否需要编写代码？

Answer 1

bootwatch没有特定或单独的JS文件，因此我们只需要担心将bootswatch主题添加到我们的项目中即可；对于JS部分，我们使用reactstrap

相关的 JS ：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import { Button } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootswatch/dist/lux/bootstrap.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'World to React'
    };
  }

  render() {
    var testName = 'modal for testing - click here';
    return (
      <div>

        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
        <ModalExample buttonLabel={testName} />
      </div>
    );
  }
}

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

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

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  render() {
    return (
      <div>
        <Button  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>
    );
  }
}

render(<App />, document.getElementById('root'));

完成工作stackblitz here

Answer 2

安装引导程序

npm install bootswatch

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { Navbar } from "./components/Navbar";
import { Home } from "./components/Home";
import "bootswatch/dist/litera/bootstrap.min.css"

function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Home} />
      </Switch>
    </Router>
  );
}

export default App;

如何在React项目上安装Bootswatch主题？

2 个答案: