react组件

先放一个hello组件：

var MyCom = React.createClass({
    render:function(){
        return( 
            <div>
                <h1>HELLO,我是组件</h1>
                <p>我是段落</p>
            </div>
        );
    }
});
ReactDOM.render(
    <MyCom/>,
    document.getElementById('demo')
);

React.createClass({...}) 方法用于生成一个组件类 HelloMessage。
调用的时候千万不能忘了那个‘/’，调用用的时候闭合的标签<MyCom/>。
原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 MyCom 不能写成 myCom 。除此之外还需要注意组件类只能包含一个顶层标签例如上面栗子的（div），否则会报错。

上面的栗子如果想要动态传参数的话可以通过this.props

var MyCom = React.createClass({
    render:function(){
        return( 
            <div>
                {/*<h1>HELLO,我是组件</h1>
                <p>我是段落</p>*/}
                亲亲的{this.props.name}
            </div>
        );
    }
});
ReactDOM.render(
    <MyCom name="我的宝贝"/>,
    document.getElementById('demo')
);

输出：亲亲的我的宝贝

注意：在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

最后来一个复杂的复合组件结尾，把很多个不同功能的功能组件组合成一个组件。

var Song = React.createClass({
    render:function(){
        return( 
            <div>
                <span>{this.props.song}</span>-<span>来自XX专辑</span>
            </div>
        );
    }
});
var Name = React.createClass({
    render:function(){
        return <p>{this.props.name}</p>
    }
});
var Info = React.createClass({
    render:function(){
        return(
            <div>
                <Song song={this.props.song}/>
                <Name name={this.props.name}/>
            </div>
        );
    }
});

ReactDOM.render(
    <Info  name="周华健" song="亲亲的我的宝贝"/>,
    document.getElementById('demo')
);

输出效果：

复合组件.PNG

注意React类名首字母大写（Name ,Song ,Info)。
在Info组件调用其他组件的时候，要注意将属性名（song , name）也写进去（<Song song={this.props.song}/>）。这里的song和name属性，对应最后调用的render里的Info提供的属性名（<Info name="周华健" song="亲亲的我的宝贝"/>,）。