React遍历组件元素的子元素

Posted 2020-08-21

// 创建组件

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