Html 导航栏在Reactjs中未正确显示
我正在尝试构建一个模块化的react应用程序,但由于某些原因,导航栏的格式不正确,导致导航栏出现问题 网页:- 这是我的完整代码Html 导航栏在Reactjs中未正确显示,html,css,twitter-bootstrap,reactjs,Html,Css,Twitter Bootstrap,Reactjs,我正在尝试构建一个模块化的react应用程序,但由于某些原因,导航栏的格式不正确,导致导航栏出现问题 网页:- 这是我的完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ReactStrap</title> <script src="https://unpkg.com/react@latest/dist/rea
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ReactStrap</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="root"></div>
<script type="text/babel">
var Navbar = React.createClass({
render(){
return(
<nav className="navbar navbar-default">
<div className="container">
<div className="navbar-header">
<a className="navbar-brand" href="#">ReactStrap</a>
</div>
<div id="navbar">
<ul className="nav navbar-nav">
<li className="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
);
}
});
var Jumbotron = React.createClass({
render(){
return(
<div>
<div className="jumbotron">
<div className="container">
<h1>Hello, world!</h1>
<p className="lead">This is a Bootstrap theme that uses React.js components</p>
<p><a className="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
);
}
});
var Page = React.createClass({
render(){
return(
<div>
<div className="container">
This is the home page
</div>
</div>
);
}
});
var Theme = React.createClass({
render(){
return(
<div>
<Navbar />
<Jumbotron />
<Page />
</div>
);
}
});
ReactDOM.render(
<div>
<Theme />
</div>,
document.getElementById('root'));
</script>
</body>
</html>
反应带
var Navbar=React.createClass({
render(){
返回(
);
}
});
var Jumbotron=React.createClass({
render(){
返回(
你好,世界!
这是一个使用React.js组件的引导主题
);
}
});
var Page=React.createClass({
render(){
返回(
这是主页
);
}
});
var Theme=React.createClass({
render(){
返回(
);
}
});
ReactDOM.render(
,
document.getElementById('root');
似乎没有正确地包括引导。
这是一张工作票
反应带
反应
var Navbar=React.createClass({
render(){
返回(
);
}
});
var Jumbotron=React.createClass({
render(){
返回(
你好,世界!
这是一个使用React.js组件的引导主题
);
}
});
var Page=React.createClass({
render(){
返回(
这是主页
);
}
});
var Theme=React.createClass({
render(){
返回(
);
}
});
ReactDOM.render(
,
document.getElementById('root');
您是否检查了导航栏的css?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ReactStrap</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div id="root">react</div>
<script type="text/babel">
var Navbar = React.createClass({
render(){
return(
<nav className="navbar navbar-default">
<div className="container">
<div className="navbar-header">
<a className="navbar-brand" href="#">ReactStrap</a>
</div>
<div id="navbar">
<ul className="nav navbar-nav">
<li className="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
);
}
});
var Jumbotron = React.createClass({
render(){
return(
<div>
<div className="jumbotron">
<div className="container">
<h1>Hello, world!</h1>
<p className="lead">This is a Bootstrap theme that uses React.js components</p>
<p><a className="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
);
}
});
var Page = React.createClass({
render(){
return(
<div>
<div className="container">
This is the home page
</div>
</div>
);
}
});
var Theme = React.createClass({
render(){
return(
<div>
<Navbar />
<Jumbotron />
<Page />
</div>
);
}
});
ReactDOM.render(
<div>
<Theme />
</div>,
document.getElementById('root'));
</script>
</body>
</html>