组件之间的传值有三种情况,
1.父组件给子组件传值
2.子组件给父组件传值
3.兄弟组件相互传值
1.父组件给子组件传值
子组件中通过props 封装属性,当父控件用到子组件是 给属性赋值
例:
子组件
import React from 'react';
export default class Chileren extends React.Component{
render(){
return(
<div>
{this.props.info}//用于接收穿过来的值
</div> ) } }
父组件
import React from 'react';
import Children from './Chileren';
export default class Parent extends React.Component{
render(){
return(<div> <Children info={"我是一个子控件"}/>//在这里传了值 </div> ) } }
2.子组件向父组件传值
子组件向父组件通讯,同样需要父组件向子组件传递props,只是父组件传递的不是值,而是传递一个函数,这个函数的作用域为父组件。子组件调用这个函数,将子组件要传递的信息,作为参数,传递到父组件作用域中。父组件作用域中的该函数执行时,就能调用到这个参数了。
这个比较重要 我看了网上的很多例子都没看明白,总之我自己写了一段代码实现了想要的结果
下面看代码
按照上面的思路,
首先定义父组件
import React from 'react';
import Children from './Chileren';
export default class Parent extends React.Component{
constructor(props){ super(props);
this.state={ name:"hello" }
this.changeName=this.changeName.bind(this)
}
changeName=newName=>{
setTimeout( ()=>{
this.setState( { name:newName} )
console.log("我是Parent")
},1000 ) }
render(){ return( <div> <h1> {this.state.name}</h1> <Children partentfc={this.changeName}/> </div> )
}
}
可以看到 父组件中有一个改名字的方法,(这个方法延时1S执行,为什么延时呢,为的是理解回调,)可以看到这个方法是在子组件中调用的,方法的参数也是由子组件传递的.
好了下面我们看子组件的实现
import React from 'react';
export default class Chileren extends React.Component{
partentfc;
changeNme(newName){
this.props.partentfc(newName)
console.log("我是Chilren");
}
render(){
return(
<div> <button onClick={this.changeNme.bind(this,'NNN')}>点我</button> </div>
)
}
}
可以看到子组件用一个变量 partentfc 接收了父组件传递过来的方法,这个方法在子组件的changeNme(newName) 这个方法中调用,为什么要在方法中调用呢,这个就是回调,回调了父组件的方法,不用回调是没办法执行的.
这样子组件就将父组件的name 给更改了.
子组件的这个方法回调了父组件的方法,为什么是回调呢?因为父组件的方法不影响子组件方法的执行,上面的代码子组件的log一定先于父组件的执行
3.兄弟组件之间的传值
先将值传递给父组件,再由父组件传给另一个子组件