React父子组件传值实现

发表于 |

父 组件向 子 组件传值

这是父组件的代码

1
2
3
4
5
6
7
8
9
import React from 'react'
import Son from './son.js'

class Father extends React.Component{
    render(){
        return < Son defaultValue='abcd'/>//调用子组件并传值
    }
}
export default Father

这是子组件的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react'

class Son extends React.Component{
    render(){
        const { defaultValue } = this.props//此处接收父组件传来的值
        return (
            < div >
                < button onCheck={()=>{console.log(defaultValue)}}/>//然后使用
            < /div >
        )
    }
}
export default Son

整体调用逻辑为：首先父组件引用了子组件< Son />,然后在子组件的内部写入需要传入的属性名与属性值，如这样 defaultValue='abcd' 的形式，此时在父组件中就可以在需要调用的任意位置如render方法中，使用let { defaultValue } = this.props,接收到父组件传来的数据defaultValue。此时就可用defaultValue，为所欲为了。

子 组件向 父 组件传值

这是父组件的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react'
import Son from './son.js'

class Father extends React.Component{
    fatherTest(参数1，参数2){
       ... ...
       //此处获取接收到子组件传来的数据，开始使用
       cosnt value = 参数1 - 参数2
    }
    
    render(){
        return < Son test={this.fatherTest}/>
    }
}
export default Father

这是子组件的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React from 'react'

updateChange(){
    const a=this.state.a
    const b=this.state.b
//此处是子组件向父组件传值的地方、此处参数值需要与父组件处fatherTeat方法的参数一致
    this.props.test( 参数a，参数b ，...)
}
class Son extends React.Component{
    render(){
        const { fatherTest } = this.props
        return (
            < div >
                < button onCheck={()=>{test(1，2)}}/>
            < /div >
        )
    }
}
Counter.propTypes = {
  onUpdate: PropTypes.func
};

Counter.defaultProps = {
  onUpdate: f => f //什么都不做的函数
};

export default Son

子组件向父组件传值的整体思路与父组件给子组件传值的思路略有不同。

总的来说，父->子传值，在父组件中向子组件传入属性名与属性值就可以在子组件中用this.props.属性名 获取到。

而子->父传值，则需要在父组件中写一个方法，然后在子组件中调用该方法并传入需要传的数据作为参数，然后在父组件中接收到子组件传入的参数即可、