反应不应用CSS样式

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>

I have a react app with boostrap.css included but the styles are not being applied to the elements for some reason. 我有一个包含boostrap.css的React应用程序，但是由于某种原因，样式未应用于元素。

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();

I am trying to this file which contains page navigation and called /blocks/nav.js 我正在尝试此文件，该文件包含页面导航并称为/blocks/nav.js

   import React from 'react';

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

I have included bootstrap.min.css in my index.html but the no style is being applied to the nav, if I however take the <nav id='..'> </nav> from the component and put it in my index.html then all styles get applied 我已经在我的index.html中包含bootstrap.min.css，但是如果我从组件中获取<nav id='..'> </nav>并将其放在我的导航栏中，则no样式将应用于导航<nav id='..'> </nav> index.html然后应用所有样式

UPDATE: 更新：

To clarify, this is my index.js 为了澄清，这是我的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();

And this is my blocks/Nav.js 这是我的积木/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>

)
    }
}

And this is my index.html 这是我的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>

Now the problem is the nav bar displays without any styles unless I write the code in the index.html 现在的问题是导航栏显示没有任何样式，除非我在index.html中编写代码

Answer 1

the class attribute is invalid in React, this is because it is a reserved keyword, use className instead 在React中， class属性无效，这是因为它是一个保留关键字，请改用className

in your blocks/Nav.js 在你的块/ Nav.js中

import React from 'react';


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

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

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

        )
    }
}

Hope this helps! 希望这可以帮助！

反应不应用CSS样式

问题描述

UPDATE: 更新：

1 个解决方案

解决方案1
8 已采纳 2017-08-11 10:45:59

反应不应用CSS样式

问题描述

UPDATE: 更新：

1 个解决方案

解决方案1 8 已采纳 2017-08-11 10:45:59

解决方案1
8 已采纳 2017-08-11 10:45:59