// 创建组件 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‘) );
时间: 2024-10-12 17:45:32