组件的混合

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的一些关键字);