prop实例
<div id="app"></div> <script src="bower_components/react/react.min.js"></script> <script src="bower_components/react/react-dom.min.js"></script> <script src="lib/babel-core/browser.min.js"></script> <script type="text/babel"> var MessageBox = React.createClass({ getInitialState: function () { return { isVisible: true, titleMessage: ‘你好世界(来自state哦)‘, subMessages: [ ‘我会代码搬砖‘, ‘以及花式搬砖‘, ‘不说了,工头叫我回去搬砖了。。。。。‘ ] } }, render: function () { return ( <div> <h1>{this.state.titleMessage}</h1> <SubMessage messages={this.state.subMessages} /> </div> ) } }); var SubMessage = React.createClass({ propTypes: { messages: React.PropTypes.array.isRequired }, getDefaultProps: function () { return { messages: [‘默认的子消息‘] // 防止this.props.messages不存在 } }, render: function () { var msgs = []; this.props.messages.forEach(function (msg, index) { msgs.push( <p>码农说:{msg}</p> ); }); return ( <div>{msgs}</div> ) } }); var messageBox = ReactDOM.render( <MessageBox/>, document.getElementById(‘app‘) ); </script>
时间: 2024-11-03 00:49:32