Jsx->{js语句}，
一、最基础的数据传递
<script type="text/babel"> var a = 'hello react'; let b = <div>{a}</div> ReactDOM.render(b,app); </script> |
二、传递函数
<script type="text/babel"> function a(){ return 'hello' } let b = <div>{a()}</div> ReactDOM.render(b,app); </script> |
三、传递函数，并且函数传参
<script type="text/babel"> function a(v){ if(v>3){ return <span>{v}大</span> }else{ return <span>{v}小</span> } } let b = <div>{a(5)}</div> ReactDOM.render(b,app); </script> |
四、组件重复调用
1、基础组件重复调用
<script type="text/babel"> class Childextends React.Component{ render(){ return ( <div>我是子组件</div> ) } } class Parent extends React.Component{ render(){ return (<div> <Child/> <div>我是父组件</div> </div> ) } } ReactDOM.render(<Parent/>,app); </script> |
显示结果
2、组件传值：父组件传递数据到子组件
<script type="text/babel"> class Child extends React.Component{ render(){ return ( <div style={{color:this.props.textColor}}>我是子组件</div> ) } } class Parent extends React.Component{ render(){ return (<div> <Child textColor="red"/> <div>我是父组件</div> </div> ) } } ReactDOM.render(<Parent/>,app); </script> |
显示结果
3、父组件传递变化值到子组件，颜色随意变化
<script type="text/babel"> class Child extends React.Component{ render(){ return ( <div style={{color:this.props.textColor}}>我是子组件</div> ) } } class Parent extends React.Component{ render(){ return (<div> <Child textColor={'rgb('+parseInt(Math.random()*256)+',213,22'}/> <div>我是父组件</div> </div> ) } } ReactDOM.render(<Parent/>,app); </script> |
4、组件通信：在组件之内还是通过this.props读取属性
script type="text/babel"> class Child extends React.Component{ render(){ return ( <div>我是子组件---{this.props.setMsg}</div> ) } } class Parent extends React.Component{ constructor(){ super(); this.state={ msg:"我是父组件数据" } } render(){ return (<div> <div>我是父组件</div> <Child setMsg ={this.state.msg}/> </div> ) } } ReactDOM.render(<Parent/>,app); </script> |
5、父组件的数据改变了，子组件的数据也会改变
<script type="text/babel"> class Child extends React.Component{ render(){ return ( <div>我是子组件---{this.props.setMsg}</div> ) } } class Parent extends React.Component{ constructor(){ super(); this.state={ msg:"我是父组件数据" } } show(){ this.setState({ msg:'我改变了' }) } render(){ return (<div> <div onClick={this.show.bind(this)}>我是父组件：{this.state.msg}</div> <Child setMsg ={this.state.msg}/> </div> ) } } ReactDOM.render(<Parent/>,app); </script> |
6、子组件通过调用父组件传递过去的函数，进而通过函数调用传递子组件数据到父组件
<script type="text/babel"> class Child extends React.Component{ constructor(){ super(); this.state = { msg:'我是子组件的数据' } } componentWillMount(){ this.props.getMsg(this.state.msg); } render(){ return <div >我是子组件 => {this.state.msg}</div> } } class Parent extends React.Component{ constructor(){ super(); this.state = { msg : '' } } show(v){//子组件调用次函数，父组件通过参数接受自组件传递过来的参数 this.setState({ msg:v }); } render(){
return (<div> <div>我是父组件 => {this.state.msg}</div> <Child getMsg={this.show.bind(this)}/> </div>) } }; ReactDOM.render(<Parent/>,app); </script> |
五、烧水的一个demo
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src='bower_components/react/react.js'></script> <script type="text/javascript" src='bower_components/react/react-dom.js'></script> <script type="text/javascript" src='bower_components/babel/browser.js'></script> </head> <body> <div id='app'></div> <script type="text/babel"> class Show extends React.Component{ constructor(){ super(); this.state={ msg:'' } } componentWillMount(){ this.thisShow(); } componentDidUpdate(){ this.thisShow(); } thisShow(){ if(Number(this.props.v)<Number(this.props.min)){ this.setState={ msg:'水结冰了' } } else if(Number(this.props.v)>Number(this.props.max)){ this.setState={ msg:'水烧开了' } } else{ this.setState={ msg:'水正在加热中' } } } render(){ return (<div>{this.setState.msg}</div>) } } class Water extends React.Component{ constructor(){ super(); this.state={ Wd:-3 } } change(e){ this.setState({ Wd:e.target.value }) } render(){ return (<div> <input type='number' onChange={this.change.bind(this)} defaultValue={this.state.Wd} /> <Show v={this.state.Wd} min={this.props.min} max={this.props.max}/> </div>) } } ReactDOM.render(<Water min='0' max='80'/>,app); </script> </body> </html> |