React 子组件给父组件传值、整个组件、方法

Dear 丶 2022-12-12 13:45 103阅读 0赞

### 一、准备工作 ###

1.定义一个父组件，名字为Parent

/src/component/Parent.js

import React, {Component} from 'react'
    
    export default class Parent extends Component {
        constructor(props) {
            super(props)
            this.state = {
                name: '我是父组件',
                msg: '父组件传值给子组件'
            }
        }
    
        render() {
            return (
                <div>
                    <h2>{ this.state.name }</h2>
                </div>
            )
        }
    }

2.定义一个子组件 ，名字为Children

/src/component/Children.js

3.先在App.js里引入父组件Parent

/src/App.js

import React from 'react';
    import Parent from './component/Parent'
    
    function App() {
      return (
          <div>
              <Parent/>
          </div>
      );
    }
    
    export default App;

运行项目：

![1290e2e446ccad67c157ecd774d5fb3e.png][]

编译成功

![75077d14585c85a196ba9821229de864.png][]

界面如图所示，http://localhost:3000/

4.父组件Parent引入子组件Children

![01f96a26c9e8887005b04b55b7f71c8c.png][]

已成功引入子组件

### 二、子组件Children传值(msg)给父组件Parent ###

子组件传值给父组件的步骤：

1.  父组件在调用子组件时，传入一整个组件给子组件`<Children parent={ this } />`
2.  父组件中定义一个方法`getChildrenMsg(resulet, msg)`，用来获取子组件传来的值以及执行其他操作
3.  子组件在通过`this.props`来获取到一整个组件`this.props.parent`或者`this.props[parent]`
4.  子组件调用父组件步骤2里定义的方法，通过bind绑定传值

Parent:

import React, {Component} from 'react'
    import Children from './Children'
    
    export default class Parent extends Component {
        constructor(props) {
            super(props)
            this.state = {
                name: '我是父组件',
                msg: '父组件传值给子组件',
                childrenMsg: ''
            }
        }
    
        getChildrenMsg = (result, msg) => {
            // console.log(result, msg)
            // 很奇怪这里的result就是子组件那bind的第一个参数this，msg是第二个参数
            this.setState({
                childrenMsg: msg
            })
        }
    
        render() {
            return (
                <div>
                    <h2>{ this.state.name }</h2>
                    <h3>子组件传来的值为：{ this.state.childrenMsg }</h3>
                    <h3>我要引入子组件了：</h3>
                    <hr/>
                    <Children parent={ this } />
                </div>
            )
        }
    }

Children:

import React, {Component} from 'react'
    
    export default class Children extends Component {
        constructor(props) {
            super(props)
            this.state = {
                name: '我是子组件',
                msg: '子组件传值给父组件'
            }
        }
    
        toParent = () => {
            // console.log(this.props.parent.getChildrenMsg.bind(this, this.state.msg))
            this.props.parent.getChildrenMsg(this, this.state.msg)
        }
    
        render() {
            return (
                <div>
                    <h2>{ this.state.name }</h2>
                    <button onClick={ this.toParent }>子组件传入给父组件</button>
                </div>
            )
        }
    }

### 三、子组件Children给父组件Parent传一整个组件（父组件获取整个子组件） ###

子组件给父组件传一整个组件（父组件获取整个子组件）的步骤：

1.  父组件在调用子组件时，通过ref属性，拿到整个子组件`<Children ref='children'>`
2.  父组件中通过`this.refs.children`或者`this.refs[children]`获取到一整个子组件实例（注意，要在DOM加载后才能获取）

Parent:

import React, {Component} from 'react'
    import Children from './Children'
    
    export default class Parent extends Component {
        constructor(props) {
            super(props)
            this.state = {
                name: '我是父组件',
                msg: '父组件传值给子组件',
                childrenMsg: ''
            }
        }
    
        getChildrenMsg = () => {
            this.setState({
                childrenMsg: this.refs['children'].state.msg
            })
        }
    
        render() {
            return (
                <div>
                    <h2>{ this.state.name }</h2>
                    <button onClick={ this.getChildrenMsg }>获取更新子组件的msg值</button>
                    <h3>子组件传来的值为：{ this.state.childrenMsg }</h3>
                    <h3>我要引入子组件了：</h3>
                    <hr/>
                    <Children ref="children" />
                </div>
            )
        }
    }

Children:

import React, {Component} from 'react'
    
    export default class Children extends Component {
        constructor(props) {
            super(props)
            this.state = {
                name: '我是子组件',
                msg: '子组件传值给父组件'
            }
        }
    
        render() {
            return (
                <div>
                    <h2>{ this.state.name }</h2>
                    <h3>子组件的msg为：{ this.state.msg }</h3>
                </div>
            )
        }
    }

![72ce63b870242cc9bb5dbd80e365f6b7.png][]

初始页面，点击按钮

![203e85ac5239d56a037f9ea8a6cec0d8.png][]

点击按钮后

### 四、子组件Children给父组件Parent传方法 ###

在第三点获取到整个组件的前提上，再获取方法，所以不详细讲了。

[1290e2e446ccad67c157ecd774d5fb3e.png]: /images/20221123/b380bc8486954842afcdb3297c532a0c.png
[75077d14585c85a196ba9821229de864.png]: /images/20221123/5019f2407fd14fe1b472c8c81f90a617.png
[01f96a26c9e8887005b04b55b7f71c8c.png]: /images/20221123/9e6bac8a72bd457dbceae75e2a5a359d.png
[72ce63b870242cc9bb5dbd80e365f6b7.png]: /images/20221123/3693f099a1604769a7799f471399f320.png
[203e85ac5239d56a037f9ea8a6cec0d8.png]: /images/20221123/415efaf18a0a4d2fad5049dc736acd86.png