码迷,mamicode.com
首页 > 其他好文 > 详细

React遍历组件元素的子元素

时间:2016-11-27 16:59:26      阅读:679      评论:0      收藏:0      [点我收藏+]

标签:com   cti   ext   return   标签   遍历   react   ret   blog   

// 创建组件

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‘)
);

 

React遍历组件元素的子元素

标签:com   cti   ext   return   标签   遍历   react   ret   blog   

原文地址:http://www.cnblogs.com/lqcdsns/p/6106625.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!