Компонент Navbar не отображает реакцию-загрузчик CSS - PullRequest
Новая
       37

Компонент Navbar не отображает реакцию-загрузчик CSS

0 голосов
/ 25 апреля 2019

Я рендеринг навигационной панели реагирует на загрузку, но я просто получаю беспорядочный текст ни с одним из стилей начальной загрузки.

У меня есть тег начальной загрузки CDN.Я установил Reaction-Boosttrap для проекта с npm.Я также позаботился о том, чтобы не использовать тег Bootstrap 4, так как home уже сказал, что он не работает с response-bootstrap. Я добавил следующие строки в index.html, как указано здесь https://react -bootstrap.github.io /Начало работы / Введение / . 

<script src="https://unpkg.com/react/umd/react.production.js" crossorigin />

<script
  src="https://unpkg.com/react-dom/umd/react-dom.production.js"
  crossorigin
/>

<script
  src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin
/>

<script>var Alert = ReactBootstrap.Alert;</script>

Я также перепробовал все опубликованные решения этой проблемы, которые мог найти.Я не уверен, что я делаю здесь не так ...

Index.html (очевидно, только теги сценария) 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/react/umd/react.production.js" crossorigin />
    <script
      src="https://unpkg.com/react-dom/umd/react-dom.production.js"
      crossorigin
    ></script>

    <script
      src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
      crossorigin
    ></script>

    <script>var Alert = ReactBootstrap.Alert;</script>

Index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

App.js 

import React from 'react';
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import NavDropdown from 'react-bootstrap/NavDropdown'
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="#features">Features</Nav.Link>
          <Nav.Link href="#pricing">Pricing</Nav.Link>
          <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
            <NavDropdown.Divider />
            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
          </NavDropdown>
        </Nav>
        <Nav>
          <Nav.Link href="#deets">More deets</Nav.Link>
          <Nav.Link eventKey={2} href="#memes">
            Dank memes
          </Nav.Link>
        </Nav>
      </Navbar.Collapse>
    </Navbar>;
    </div>
  );
}

export default App;

1 Ответ

1 голос
/ 25 апреля 2019

Вы используете неверную версию начальной загрузки (3.3.7) в файле index.html. Вам необходимо использовать (4.3.1): 

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

Мне удалось воспроизвести его неправильно с 3.3.7 image И воспроизведите, как выглядит правильный путь, используя (4.3.1): image

...