需求:我们要在导航里组件里嵌套一个搜索框组件,并设置样式
定义搜索框组件:
// 搜索框组件
var SearchText = React.createClass({
render: function(){
return <input type="text" placeholder="请输入关键字" className={this.props.cssClass}/>
}
});
导航栏组件NavBar中如何嵌套?
<li><SearchText cssClass="search_text2" /></li>
关于样式
<style type="text/css">
/*searchtext的样式*/
.search_text{height: 25px;border-radius: 5px;}
.search_text2{height: 25px;border-radius: 5px;background-color: beige}
</style>
在SearchText如何使用css样式?
1. className=”search_text”
2. className={this.props.cssClass},并且使用组件的时候cssClass=”search_text2”。 其中cassClass是可以随便命名的。
最后我们的nav.js代码如下:
// 创建组件
var NavBar = React.createClass({
liClick: function () {
alert('组件');
},
render: function(){
return <ul>
<li><a href="">最新电影</a></li>
<li><a href="" onClick={function(){alert('组件')}}>最新评论</a></li>
<li><SearchText cssClass="search_text2" /></li>
</ul>
}
});
// 搜索框组件
var SearchText = React.createClass({
render: function(){
return <input type="text" placeholder="请输入关键字" className={this.props.cssClass}/>
}
});
ReactDOM.render(
// 使用组件
<NavBar />,
document.getElementById("navbar")
);
html代码如下:
<!DOCTYPE html>
<html>
<head>
<title>初始</title>
<meta charset="utf-8">
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<style type="text/css">
*{padding: 0;margin: 0}
#navbar{position: fixed;width: 100%;height: 60px;background-color: #222;}
#navbar li{float: left;line-height: 60px;margin-left: 10px;display: inline-block;}
#navbar li a{color: #fff;text-decoration: none;}
/*searchtext的样式*/
.search_text{height: 25px;border-radius: 5px;}
.search_text2{height: 25px;border-radius: 5px;background-color: beige}
</style>
</head>
<body>
<div id="navbar"></div>
<div id="container"></div>
<div id="footer"></div>
<script type="text/babel" src="src/nav.js"></script>
</body>
</html>