* demo地址：* * HTML*
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script><script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script><script src="http://static.runoob.com/assets/react/browser.min.js"></script><!-- 引用外部JSX文件(text/babel) --><script type="text/babel" src="js/JSXscript.js"></script> <style> *{font-size:14px;} #para{color:red;}</style></head><body> <div id="example"></div></body></html>* JS*
// 變量var content = document.getElementById('example');var i = 1;// 樣式對象var mystyle = { fontSize:20, padding:'0 15px', color:'blue', fontWeight:700}var background_gray = { backgroundColor:'#eee', padding:10}// 數組var arr = [ <h3>arr數組的h3</h3>, <h4>arr數組的h4</h4>]// 單組件var HelloMessage = React.createClass({ render:function(){ return <p>單個組件 {this.PRops.name}</p>; }})// 多組件嵌套var Website = React.createClass({ render:function(){ return ( <div style={background_gray}> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ) }})var Name = React.createClass({ render:function(){ return <h1>{this.props.name}</h1> }})var Link = React.createClass({ render:function(){ return <a href={'https://' + this.props.site}>{this.props.site}</a> }})// State(狀態)var Likeme = React.createClass({ // 'state'是固定單詞 getInitialState:function(){ return {key:true} }, changeState:function(event){ this.setState({key:!this.state.key}) }, render:function(){ var text = this.state.key ? '喜歡' :'討厭'; return <p onClick = {this.changeState}>react state: 你<b>{text}</b>我,點擊切換</p> }})//單getDefaultPropsvar Defaultprops = React.createClass({ getDefaultProps:function(){ return { name : '作者' } }, render:function(){ return <p><b>{this.props.name}</b>的基本資料：</p> }})//多getDefaultPropsvar Myinfo = React.createClass({ getDefaultProps:function(){ return { name : 'lidy', sex : 'male', email : '820262236', age : 27 } }, render:function(){ return ( <div> 簡稱：{this.props.name}<br/> 姓別：{this.props.sex}<br/> 郵箱：{this.props.email}@<b>QQ</b>.com<br/> 年齡：{this.props.age} </div> ) }})// setState & replaceStatevar Counter = React.createClass({ getInitialState:function(){ return {num:0} }, changeNum:function(){ //合并state this.setState({num:this.state.num+1}); //替換state // this.replaceState({num:this.state.num+2}); }, render:function(){ return <p onClick={this.changeNum}>點擊次數為：{this.state.num}</p> }})// setProps & replaceProps --ERROR/*var Counter2 = React.createClass({ getDefaultProps:function(){ return {num:0}; }, changeNum:function(){ this.setProps({num:this.props.num+2}) }, render:function(){ return <p onClick={this.changeNum}>點擊次數為：{this.props.num}</p> }})*///componentDidMount第一次渲染后調用，客戶端var Opacity = React.createClass({ getInitialState:function(){ return {opacity:1} }, componentWillMount:function() { // alert(1); console.log('Component WILL MOUNT!') }, componentWillReceiveProps:function(newProps) { console.log('Component WILL RECEIVE PROPS!') }, componentDidMount :function(){ console.log('Component DID MOUNT!'); this.t = setInterval(function(){ var opacity = this.state.opacity; opacity-=0.05; if(opacity<0.1){opacity = 1} this.setState({opacity:opacity}); }.bind(this),100) }, render:function(){ return <p style={{opacity:this.state.opacity,padding:10,backgroundColor:'#eee'}}>Hello {this.props.name}</p> }})//react Ajaxvar UserGist = React.createClass({ getInitialState:function(){ return { username:'', lastGistUrl:'' } }, componentDidMount:function(){ // 需引入jquery this.serverRequest = $.get(this.props.source,function(result){ var lastGist = result[0]; //? WHY result[0] this.setState({ username:lastGist.owner.login, lastGistUrl:lastGist.html_url }) }.bind(this)); }, componentWillUnmount:function(){ this.serverRequest.abort(); }, render:function(){ return ( <div style={background_gray}> AJAX: 用戶{this.state.username}最新的Gist共享地址： <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a> </div> ) }})//表單var InputBox = React.createClass({ getInitialState:function(){ return {value:'lidysun'} }, changeValue:function(event){ this.setState({value:event.target.value}); }, render:function(){ var value = this.state.value; return ( <div style={{margin:'10px 0',backgroundColor:'#ddd',padding:10}}> <input value={value} onChange={this.changeValue} /> <p>{value}</p> </div> ) }})//handleChange updateStateProp子組建更新父組建statevar Inner = React.createClass({ render:function(){ return ( <div> <input type="button" value="點擊我" onClick={this.props.handleChange} /> 子組建更新父組建state <p>{this.props.newProp}</p> </div> ) }})var HellowMessage = React.createClass({ getInitialState:function(){ return {value:'hello world!'} }, handleChange:function(){ this.setState({value:'孫剛同學'}) }, render:function(){ var value = this.state.value; return <Inner newProp={value} handleChange={this.handleChange} /> }})//渲染ReactDOM.render( <div> <h1>歡迎光臨</h1> <h2>react by facebook</h2> {/*注釋...*/} <p id="para">我的id是para{0.5+0.5}</p> <p>三元運算符結果：{i==1?'true':'false'}</p> <p style={mystyle}>內聯樣式style</p> <div>{arr}</div> <div><HelloMessage name='react createClass'/></div> <Website name="組件嵌套" site="www.baidu.com" /> <Likeme /> <div style={background_gray}> <Defaultprops /> <Myinfo /> </div> <Counter /> <Opacity name = "world"/> <UserGist source="http://api.github.com/users/octocat/gists" /> <InputBox /> <HellowMessage /> </div>,content)新聞熱點
疑難解答
