Question

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Nav from './blocks/Nav';
import 'bootstrap/dist/css/bootstrap.css';

ReactDOM.render( < App / > , document.getElementById('root'));
registerServiceWorker();

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div id="my-app">
  </div>
</body>

</html>

我有一个包含boostrap.css的反应应用程序，但由于某些原因，样式没有应用于元素。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Nav from './blocks/Nav';

ReactDOM.render(<Nav />, document.getElementById('top-nav'));
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

我正在尝试这个包含页面导航的文件并调用/blocks/nav.js

   import React from 'react';

   export default class Nav extends React.Component {
    render() {
       return (
          <nav id='..'> </nav>
        )
      }
    }

我在index.html中包含了bootstrap.min.css但是没有样式应用于导航，但是如果我从组件中取出<nav id='..'> </nav>并将其放入我的index.html然后全部样式得到应用

UPDATE：

澄清一下，这是我的index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import registerServiceWorker from './registerServiceWorker';
    import Nav from './blocks/Nav';
    import 'bootstrap/dist/css/bootstrap.css';

    ReactDOM.render(<Nav />, document.getElementById('my-nav'));
    ReactDOM.render(<App />, document.getElementById('root'));
    registerServiceWorker();

这是我的block / Nav.js

import React from 'react';


export default class Nav extends React.Component {
    render() {
    return (

<div id="top-nav" class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-toggle"></span>
      </button>
      <a class="navbar-brand" href="#">Dashboard</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">

        <li class="dropdown">
          <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#"><i class="glyphicon glyphicon-user"></i> Admin <span class="caret"></span></a>
          <ul id="g-account-menu" class="dropdown-menu" role="menu">
            <li><a href="#">My Profile</a></li>
          </ul>
        </li>
        <li><a href="#"><i class="glyphicon glyphicon-lock"></i> Logout</a></li>
      </ul>
    </div>
  </div>
</div>

)
    }
}

这是我的index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="my-nav"></div>
    <div id="root"></div>
  </body>
</html>

现在问题是除非我在index.html

中编写代码，否则导航条显示没有任何样式

反应不应用CSS样式

UPDATE：

0 个答案: