React组件

React组件

组件是React中的基本单位，在每个组件里面又封装了程序逻辑，通过reader标出界面片段或者回传一段描述，组件再通过React.renderComponent将组件展示在浏览器中。每个组件的编写中会绑定一些事件，这些事件是动态绑定的，这个以后分析。

注释：在React编写注释的时候一定要注意，我们创建一个单独的js文件，在老版本加上/** @jsx React.DOM */这段前面加上其他注释会有报错异常,在新版本的react.js去掉了对这个注释的定义，可以不写一样执行。

看下代码：

/**
 * Created by 13121528 on 2014/10/15.
 */
/**
 * @jsx React.DOM
 */
var KlmNode = React.createClass({
   render:function(){
       return (<p>hello,sss</p>);
   }
});

React.renderComponent(<KlmNode />,document.getElementById('container'));

从上面代码分析运行结果浏览器会报错“”

去掉/** @jsx React.DOM */前端的注释就运行正常了。在React官网也提到了注释问题，格式限定的非常严格。

在renderComponent函数的第一个参数是组件，这个命名可以任意：但你要针对这个命名创建一个的组件，如下代码：

/**
 * @jsx React.DOM
 */

var hello = React.createClass({
    render:function(){
        return (<div className="ss">{this.props.title}</div>);
    }
});

React.renderComponent(<hello title="Hello!" />,document.getElementById('container'));

运行结果是：

注：最新版本的React.js现在区分自定义模板名称了，上面小写的<hello> 首字母必须大写才能执行<Hello>，不然会失效。

通过React.createClass方式放回一个<div>的HTML Dom结构，其实<hello />标签就是return <div>，注意这里给创建组件添加样式需要通过"className"来定义，一般我们给HTML dom添加样式用class，而在React框架中则是className,或者直接对dom添加style，这个叫“内联样式”，在上面代码中可以给自定义组件添加属性，这个属性名称可以任意命名，跟平常自定义HTML dom属性一样，怎么获取值呢？在React中是用{this.props.*}的方式获取自定义属性的值。

刚才提到内联样式，在React中是这样呈现它的写法的，看下面代码：

/**
 *  @jsx React.DOM
 */
var navcss ={
    margin:' 0 auto',
    width:'95%',
    height:'30px;',
    lineHeight:'30px',
    background:'cornflowerblue',
    textAlign:'center'
}
var Nav = React.createClass({
    render:function(){
        return(
            <div style={navcss}>
                var NB = new Beer();
            </div>
            );
    }
});

React.renderComponent(<Nav  />,document.getElementById('navigation'));

我定义一个navcss变量里面封装了css样式,我只要在return dom中加上style={"自定义css样式变量"}就可以呈现在浏览器中了。注释：这里的css样式属性是驼峰式的命名,如（lineHeight,textAlign...）;

在创建一个组件的时候return dom的时候，在里面可以再定义一组，如下段代码：

/**
 *  @jsx React.DOM
 */
var navcss ={
    margin:' 0 auto',
    width:'95%',
    padding:'10px 0px 10px 0px;',
    lineHeight:'50px',
    background:'cornflowerblue',
    textAlign:'center',
    color:'#fff',
    fontWeight:'bold',
    fontSize:'50px',
    textShadow:'0 0 1px #f6f6f6,0 0 5px #f6f6f6,0 0 15px #f6f6f6,0 0 20px #0090d9,0 0 25px #0090d9,0 0 30px #0090d9,0 0 50px #0090d9,0 0 80px #0090d9,0 0 100px #0090d9,0 0 150px #0090d9'
}
var navEmCss = {
    display:'block',
    width:'30px',
    height:'30px',
    float:'right',
    border:'1px solid #000',
    position:'relative'
}

var Nav = React.createClass({
    render:function(){
        return(
            <div style={navcss}>
                var NB = new Bee();
                <NavEm />
            </div>
            );
    }
});

var NavEm = React.createClass({
    render:function(){
        return(
            <em style={navEmCss} />
        )
    }
});

React.renderComponent(<Nav  />,document.getElementById('navigation'));

运行结果如图：

右边有一个黑色的小框就是嵌套添加的组件内容。这里只是介绍React可以这样创建一个Dom树结构，个人在开发过程中不怎么会这样去做，我觉得这样会增加js代码量的开发。

注：在创建React组件的时候，如果里面DOM节点会自动给其添加一个属性data-reactid=".0.0"，在这里提示一下！