4.2
<script type=text/babel>
// 定义一个网站导航
//定义的大组件
class Webtabs extends React.Component{
render(){
return (
<div>
<h1>{this.props.info}</h1>
<Href data-href={this.props['data-href']}/>
</div>//注意使用多个标签的时候需要一个父盒子包裹
)
}
}
//定义一个子组件
class Href extends React.Component{
render(){
return <a href={this.props['data-href']}>查看</a>
}
}
ReactDOM.render(
<div>
<Webtabs info="爱前端" data-href="http://www.aiqianduan.cn"/>
<Webtabs info="百度" data-href="http://www.baidu.com"/>
<Webtabs info="淘宝" data-href="http://www.taobao.com"/>
//使用自定义标签的时候最好加上data-,以防将本身的属性混淆
</div>
,document.querySelector(".box"))
</script>
4.3类名的获取
如果要获取标签的类名,使用this.props.className(避讳js的一些关键字);