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 (
            

                
{ this.state.name }
            
        )
    }
}

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 (
            

                
{ this.state.name }
            
        )
    }
}

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

/src/App.js

import React from 'react';
import Parent from './component/Parent'

function App() {
  return (
      

          
      
  );
}

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 (
            

                
{ this.state.name }
                
我要引入子组件了：
                

                
            
        )
    }
}

已成功引入子组件

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

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

1. 父传子值：在调用子组件的时候，作为属性的值传给子组件
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 (
            

                
{ this.state.name }
                
我要引入子组件了：
                

                
            
        )
    }
}

Children:

import React, {Component} from 'react'

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

    render() {
        return (
            

                
{ this.state.name }
                
{ this.props['parent-msg'] }
            
        )
    }
}

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

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

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

1. 父传子值：在调用子组件的时候，作为属性的值传给子组件
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 (
            

                
{ this.state.name }
                
我要引入子组件了：
                

                
            
        )
    }
}

Children:

import React, {Component} from 'react'

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

    render() {
        return (
            

                
{ this.state.name }
                
{ this.props['parent-msg'] }
                调用父组件的方法
            
        )
    }
}

点击按钮

子组件能调用父组件的方法

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

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

1. 父传子值：在调用子组件的时候，作为属性的值传给子组件
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 (
            

                
{ this.state.name }
                
我要引入子组件了：
                

                
            
        )
    }
}

Children:

import React, {Component} from 'react'

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

    render() {
        return (
            

                
{ this.state.name }
                
{ this.props['parent-msg'] }
                调用父组件的方法
                调用父组件的getName方法
                
获取父组件的name：{ this.props['parent-parent'].state.name }
                
获取父组件的msg：{ this.props['parent-parent'].state.msg }
            
        )
    }
}

成功获取到父组件的各种值，点击按钮

能调用到没直接传过来的getName方法