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

一、准备工作

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

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>
            </div>
        )
    }
}

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;

运行项目：

编译成功 界面如图所示，http://localhost:3000/

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

import React, {Component} from 'react'
import Children from './Children'

export default class Parent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '我是父组件',
            msg: '父组件传值给子组件'
        }
    }

    render() {
        return (
            <div>
                <h2>{ this.state.name }</h2>
                <h3>我要引入子组件了：</h3>
                <hr/>
                <Children/>
            </div>
        )
    }
}

已成功引入子组件

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

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

1. 父传子值：在调用子组件的时候，作为属性的值传给子组件<Children 共用的参数名={ this.state.值 } />
2. 子接受父： 通过this.props来获取

Parent:

import React, {Component} from 'react'
import Children from './Children'

export default class Parent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '我是父组件',
            msg: '父组件传值给子组件'
        }
    }

    render() {
        return (
            <div>
                <h2>{ this.state.name }</h2>
                <h3>我要引入子组件了：</h3>
                <hr/>
                <Children parent-msg={ this.state.msg }/>
            </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>{ this.props['parent-msg'] }</h3>
            </div>
        )
    }
}

绿色框框里的就是父传过来的parent-msg啦

二、父组件Parent传方法(run)给子组件Children

React父组件传方法给子组件的步骤：

1. 父传子值：在调用子组件的时候，作为属性的值传给子组件<Children 共用的参数名={ this.方法名 } />
2. 子接受父： 通过this.props来获取
   Parent

import React, {Component} from 'react'
import Children from './Children'

export default class Parent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '我是父组件',
            msg: '父组件传值给子组件'
        }
    }

    run = () => {
        alert('我是父组件的run方法')
    }
    render() {
        return (
            <div>
                <h2>{ this.state.name }</h2>
                <h3>我要引入子组件了：</h3>
                <hr/>
                <Children parent-msg={ this.state.msg } parent-run={ this.run } />
            </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>{ this.props['parent-msg'] }</h3>
                <button onClick={this.props['parent-run']}>调用父组件的方法</button>
            </div>
        )
    }
}

点击按钮
子组件能调用父组件的方法

三、父组件Parent传整个组件（parent）给子组件Children

React父组件传整个组件给子组件步骤：

1. 父传子值：在调用子组件的时候，作为属性的值传给子组件<Children 共用的参数名={ this }/>
2. 子接受父： 通过this.props来获取

Parent:

import React, {Component} from 'react'
import Children from './Children'

export default class Parent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            name: '我是父组件',
            msg: '父组件传值给子组件'
        }
    }

    run = () => {
        alert('我是父组件的run方法')
    }

    getName = () => {
        alert(this.state.name)
    }

    render() {
        return (
            <div>
                <h2>{ this.state.name }</h2>
                <h3>我要引入子组件了：</h3>
                <hr/>
                <Children parent-msg={ this.state.msg } parent-run={ this.run } parent-parent={ this } />
            </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>{ this.props['parent-msg'] }</h3>
                <button onClick={this.props['parent-run']}>调用父组件的方法</button>
                <button onClick={this.props['parent-parent'].getName}>调用父组件的getName方法</button>
                <h3>获取父组件的name：{ this.props['parent-parent'].state.name }</h3>
                <h3>获取父组件的msg：{ this.props['parent-parent'].state.msg }</h3>
            </div>
        )
    }
}

成功获取到父组件的各种值，点击按钮
能调用到没直接传过来的getName方法