Question

当我在React中单击一个按钮时，我想显示一个模态组件。我遵循了教程，但是模态仍然没有出现。

当我在模式中放置文本时，单击该文本会显示，但如果放置bootswatch组件（https://bootswatch.com/lux/），则文本不会显示。

我导入了主题的两个CSS文件：导入'../node_modules/bootswatch/dist/lux/bootstrap.css'; 导入'../ node_modules / bootswatch / dist / lux / bootstrap.min.css';

但是sccs文件不是，因为它们在编译过程中问我一些问题。这可能是我的问题的原因吗？仅使用这两个文件，其他所有组件都很好。

import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from '../pages/home.js';
import Logo from '../img/logo.png';
import ModalLoginRegister from './modalLoginRegister';

export default class Header extends React.Component{
      state = {
        visible: false
      };

      onShow = () => this.setState({ visible: true });
      onHide = () => this.setState({ visible: false });
      render(){
        const { visible } = this.state;
        return (
          <Router>
              <nav class="navbar navbar-expand-lg navbar-light bg-light" >
                <img src={Logo} alt="Logo" />
                <a class="navbar-brand" href="#"> TheQuest</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarColor02">
                  <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                      <Link class="nav-link" to="/">Home</Link>
                    </li>
                    <li class="nav-item">
                      <Link class="nav-link" to="/browse">Browse</Link>
                    </li>
                    <li class="nav-item">
                      <Link class="nav-link" to="/create">Create</Link>
                    </li>
                    <li class="nav-item">
                      <Link class="nav-link" to="/favorite">Favorite</Link>
                    </li>
                  </ul>
                </div>
                <button type="button" class="btn btn-secondary" onClick={this.onShow}>
                      Login / Register
                </button>
                <ModalLoginRegister visible={visible} onHide={this.onHide}/>
            </nav>

            <Route exact path="/" component={Home} /> 
            <Route path="/browse" component={Browse} />
            <Route path="/create" component={Create} />
            <Route path="/favorite" component={Favorite} />
         </Router>
        );
      }
  }

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

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

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

import React from 'react';

export default class ModalLoginRegister extends React.Component{
    onHide = e => {
        this.props.onHide && this.props.onHide(e);
    };
    render() {
        if(!this.props.visible){
            return null;
        }
        console.log("Show modal test");
        return(

            <div class="modal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Modal title</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>Modal body text goes here.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">Save changes</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" 
                            onClick={this.onHide}>Close</button>
                    </div>
                    </div>
                </div>
            </div>
        );
    }
}

当我单击“登录/注册”按钮时，什么也不显示。但是此消息出现在我的终端上：“显示模态测试”。除此之外，我的终端没有错误

如何在React中显示Bootswatch模式？

0 个答案: