標籤:message span 雙向 state ret awesome nbsp value dom
<div id="app"></div><script src="bower_components/react/react.min.js"></script><script src="bower_components/react/react-dom.min.js"></script><!-- 引入React的一個擴充 --><script src="bower_components/react/react-with-addons.min.js"></script><script src="lib/babel-core/browser.min.js"></script><script type="text/babel"> var EasyForm = React.createClass({ // 引入mixins mixins: [React.addons.LinkedStateMixin], getInitialState: function () { return { message: ‘react is awesome‘, isReactAwesome: true } }, render: function () { return ( <div> <h1>我想說:{this.state.message}</h1> <h2>React是不是很好用? {this.state.isReactAwesome ? ‘非常好用!‘ : ‘一般般。。。‘}</h2> <input type="text" valueLink={this.linkState(‘message‘)}/> <br/> <input type="checkbox" checkedLink={this.linkState(‘isReactAwesome‘)}/> <br/> <SubComp {...this.props}/><!--spread--> </div> ); } }); var SubComp = React.createClass({ render: function () { return ( <div> <h3>這是個子組件哦</h3> <SubSubComp {...this.props}/> </div> ) } }); var SubSubComp = React.createClass({ render: function () { return ( <div> <p>你想說什嗎?</p> <input type="text" valueLink={this.props.messageLink}/> <p>你稀罕React嗎?</p> <input type="checkbox" checkedLink={this.props.likeLink}/> </div> ) } }); ReactDOM.render( <EasyForm/>, document.getElementById(‘app‘) );</script>
React(二)實現雙向資料流