以下关于React的props属性的内容介绍都是我个人理解:
在react当中,我们常说的单向数据流值的说法,其实说的就是props属性,最常见的props用法就是组件之间的通信---父组件向子组件传值。
并且,props本身是不可逆的,具有只读性,也就是说它不能修改自己本身,传什么值,它就只能接受什么值,并不能修改传递过来的值。
下面我们来看一下,父组件是如何向子组件传值的:
子组件:
import React, { Component } from 'react'; import './App.css'; class Home extends Component { constructor(props){ super(props); }; render() { return ( <div className="Home"> {this.props.name} </div> ); } } export default Home;
父组件:import React, { Component } from 'react'; import './App.css'; import Home from './Home'; class App extends Component { constructor(props){ super(props); this.state = { num: 90 } }; render() { return ( <div className="App"> <Home name="raeam" /> </div> ); } } export default App;
从上面的例子来看,我来解释一下,在React当中,父组件是如何向子组件传值的;大致分为几步:
第一步:首先我们要定义父组件和子组件且分清,谁是父组件、谁是子组件,
第二步:如果父组件和子组件不在同一个文件中,需要把子组件引入到父组件所在的文件当中:
import Home from './Home';
如果在同一个文件当中,就无需引用;
第三步:这一步讲的就是我们该如何使用引入过来的子组件呢?
<Home name="raeam" />
其实,就是上面这个用法,把它当作一个组件来用,其实它本身就是一个组件。
接下来就是讲如何传值呢?
首先我们要在引入过来的子组件上去自定义一个属性,比如name,接着就是我们要把传入子组件的值写入到name属性中:
<Home name="raeam" />
从上面这个我们就可以看到,"raeam"这个值就是我们父组件要传给子组件的值。
第四步:从第三步我们了解到,我们在引入的子组件上通过自定义的name属性,已经把父组件的值传递给了子组件,
那么接下来,我们要做的就是,如何去接收父组件传递过来的值,这里就要用到props属性了,它的作用就是接收传值,
{this.props.name}
这样,就接收到父组件传递过来的值了,其中,this.props.name中props后面的name就是在父组件当中,同过在子组件上自定义的name属性。
接下来,我要讲的就是如何把父组件中,state中的值传递给子组件呢?
父组件:
import React, { Component } from 'react'; import './App.css'; import Home from './Home'; class App extends Component { constructor(props){ super(props); this.state = { num: 90, xv: 100 } this.handleClick = this.handleClick.bind(this); }; handleClick(){ this.setState({ num: this.state.num + 1, }) }; render() { return ( <div className="App"> {this.state.num} <Home name="raeam" git={this.state.num} dnf={this.state.xv}/> <button onClick={this.handleClick}>点击</button> </div> ); } } export default App;
子组件:import React, { Component } from 'react'; import './App.css'; class Home extends Component { constructor(props){ super(props); }; render() { return ( <div className="Home"> {this.props.name} {this.props.git} {this.props.dnf} </div> ); } } export default Home;
转载于:https://my.oschina.net/u/3946362/blog/2252472