react组件

先放一个hello组件：

var MyCom = React.createClass({
    render:function(){
        return( 
            

                
HELLO,我是组件
                
我是段落
            
        );
    }
});
ReactDOM.render(
    ,
    document.getElementById('demo')
);

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

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

var MyCom = React.createClass({
    render:function(){
        return( 
            

                {/*
HELLO,我是组件
                
我是段落
*/}
                亲亲的{this.props.name}
            
        );
    }
});
ReactDOM.render(
    ,
    document.getElementById('demo')
);

输出：亲亲的我的宝贝

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

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

var Song = React.createClass({
    render:function(){
        return( 
            

                {this.props.song}-来自XX专辑
            
        );
    }
});
var Name = React.createClass({
    render:function(){
        return 
{this.props.name}
    }
});
var Info = React.createClass({
    render:function(){
        return(
            

                
                
            
        );
    }
});

ReactDOM.render(
    ,
    document.getElementById('demo')
);

输出效果：

复合组件.PNG

注意React类名首字母大写（Name ,Song ,Info)。
在Info组件调用其他组件的时候，要注意将属性名（song , name）也写进去（）。这里的song和name属性，对应最后调用的render里的Info提供的属性名（,）。