React不应用css样式
React不应用css样式
提问于 2017-08-11 17:48:17
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的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();我正在尝试访问这个名为/blocks/nav.js的包含页面导航的文件
import React from 'react';
export default class Nav extends React.Component {
render() {
return (
<nav id='..'> </nav>
)
}
}我已经在我的index.html中包含了bootstrap.min.css，但是no样式正在应用于导航，但是如果我从组件中获取<nav id='..'> </nav>并将其放入我的index.html中，那么所有样式都会被应用
更新：
澄清一下，这是我的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();这是我的块/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中编写代码，否则导航栏显示没有任何样式
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-08-11 18:46:00
class属性在React中无效，这是因为它是保留的关键字，请改用className
在块/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>
)
}
}希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45632069
复制相关文章
相似问题
腾讯云开发者
