React 组件之间的传值--尤其子组件给父组件传值

组件之间的传值有三种情况,

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.兄弟组件之间的传值

先将值传递给父组件,再由父组件传给另一个子组件