React（一）

標籤：rip   render   create   style   pes   ret   row   this   for   

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>

 

React（一）