React访问组件元素的子元素(ES5与ES6的对比)

// 创建组件

var NewDom = React.createClass({ // 类名一定要大写开头
    render: function () {
        return (
            <ol>
                {
                    React.Children.map(this.props.children, function (child) {
                        // 获得元素的子元素
                        console.info(child);
                        return (<li>{child}</li>);
                    })
                }
            </ol>
        )
    }
});

ReactDOM.render(
    <NewDom>
        <span>123</span>
        <span>456</span>
    </NewDom>,
    document.getElementById('example')
);

ES6的写法：

class NewDom extends React.Component {
    render() { // 开头花括号一定要和小括号隔一个空格，否则识别不出来
        // 标签开头一定要和return一行
        return <ol>
            {
                React.Children.map(this.props.children, function (child) {
                    return <li>{child}</li>
                })
            }
        </ol>;
    }
}

ReactDOM.render(
    <NewDom>
        <span>123</span>
        <span>456</span>
    </NewDom>,
    document.getElementById('example')
);

React组件的属性props

var NewDom = React.createClass({ // 类名一定要大写
    getDefaultProps: function () { // 设置默认属性
        return {title: '123'};
    },
    propTypes: {
        title: React.PropTypes.string
    },
    render: function () {
        return (<div>{this.props.title}</div>); // 变量用花括号标识
    }
});

ReactDOM.render(
    <NewDom />,
    document.getElementById('example')
);

ES6

class NewDom extends React.Component {
    // 不能在组件定义的时候定义一个属性
    render() {
        return (<div>1 {this.props.title}</div>)
    }
}

NewDom.propTypes = {
    title: React.PropTypes.bool
};

NewDom.defaultProps = {title: '123'}; // 设置默认属性

ReactDOM.render(
    <NewDom/>,
    document.getElementById('example')
);

一般区分两个的原则是，可变的放在state中，不可变的放在props中。

事件

ES5

var NewDom = React.createClass({ // 类名一定要大写开头
    btnClick: function (ele) {
        console.info(ele);
        console.info(this.refs.tex);
    },
    render: function () {
        return (
            <div>
                <input type="text" ref="tex" />
                <input type="button" onClick={this.btnClick} value='click me' />
            </div>
        );
    }
});

ReactDOM.render(
    <NewDom/>,
    document.getElementById('example')
);

ES6

class NewDom extends React.Component {
    btnClick() {
        console.info(this); // this为该组件类
        console.info(this.refs.tex); //this.refs.tex为组件里面索引为tex的
    }
    render() {
        // 注意bind后面的this
        return (
            <div>
                <input type="text" ref="tex" />
                <input type="button" onClick={this.btnClick.bind(this)} value='click me' />
            </div>
        )
    }
}

ReactDOM.render(
    <NewDom/>,
    document.getElementById('example')
);

ES6的坑

• 类名(组件名)一定要用大写开头，否则自定义的组件无法编译，识别不出来。
• 类中定义render函数要注意两点，见代码注释。

render() {//开头花括号一定要和小括号隔一个空格，否则识别不出来
   return <ol>//标签前一半一定要和return一行
     {
        React.Children.map(this.props.children, function (child) {
           return <li>{child}</li>;
        })
      }
   </ol>;
}

• 在class中使用class的变量或者方法，一定要加个this。如this.handlerclick。
• es6 绑定事件需要onClick={this.func1.bind(this)}。
  这样func1和bind里面的参数‘this’的作用域才绑定到了一起（注意es5是不需要这个bind(this)的），func1中如果有this.name这类语句，相当于是使用参数‘this’里面的变量值;或者使用箭头函数func1= (e)=> {函数体}

react代码逻辑很清晰，好维护也好使用。重要的是，需要使用者把从前直接对dom操作的思维方式转换过来，相信会爱上它的。