React父子组件之间的传值

想要了解父子组件之间的通信，必须搞清楚谁是父组件，谁是子组件，谁给谁传值这几个问题，为了方便演示：把App.js当作父组件，在父组件里引入并使用Son.js，即Son.js为子组件，如下图所示：

子组件(Son.js)

import React, {Component} from 'react';

class Son extends Component {
    render() {
        return (
            <div>
                我是儿子
            </div>
        );
    }
}

export default Son;

父组件(App.js) 引入子组件Son.js

import React, {Component} from 'react';
import Son from "./components/Son";

class App extends Component {
  render() {
    return (
        <div>
          我是父亲
          <Son/>//子组件
        </div>
    );
  }
}

export default App;

结果如下图所示：

1. 父组件给子组件传值
首先给父组件App.js里添加一些状态

    state={
        blackpink:[
                    {
                        name:'jisoo',
                        age:26,
                        gender:'female'
                    },
                    {
                        name:'jennie',
                        age:25,
                        gender:'female'
                    },
                    {
                        name:'rose',
                        age:24,
                        gender:'female'
                    },
                    {
                        name:'lisa',
                        age:24,
                        gender:'female'
                    },
        ]
    }

现在想把App.js里的状态显示在Son.js里面，涉及到父组件给子组件传值

• 父组件传值<Son passObj={this.state.blackpink}>
• 子组件接受值console.log(this.props.passObj)
  App.js里

  render() {
        const blackpink=this.state.blackpink
    return (
        <div>
          我是父亲
          <Son passObj={blackpink}/>
        </div>
    );
  }

Son.js里

    render() {
        const passObj=this.props.passObj
        console.log(passObj)
        return (
            <div>
                我是儿子
            </div>
        );
    }

来看看控制台打印结果，不出意外应该就是父组件App.js里面的blackpink

下面将blackpink每个对象里的name属性以列表的形式渲染到Son.js里

        return (
            <div>
                我是儿子
                <ul>
                    {
                        passObj.map((item)=>{
                            return <li key={item.name}>{item.name}</li>
                    })
                    }
                </ul>
            </div>
        );

来看看结果：

2. 子组件给父组件传值

• 父组件传一个箭头函数

<Son passObj={this.bts}>
bts=(item)=>{
	console.log(item)
}

• 子组件接收

this.props.passObj(...)

要实现给父组件传值，先给子组件状态里存入一些值好给父组件传

Son.js里

    state={
        bts:[
            {
                name:'Jin',
                age:'10',
                gender:'male'
            },
            {
                name:'RM',
                age:11,
                gender:'male'
            },
            {
                name:'suga',
                age:12,
                gender:'male'
            },
            {
                name:'V',
                age:13,
                gender:'male'
            }
        ]
    }

App.js里

  render() {
    return (
        <div>
          我是父亲
          <Son passObj={this.bts}/>//传入箭头函数
        </div>
    );
  }
  bts=(item)=>{
	console.log(item)//打印Son.js里的bts状态
  }

Son.js接收

render() {
        this.props.passObj(this.state.bts)//传入状态bts
        return (
            <div>
                我是儿子
            </div>
        );
    }

来看看结果，父组件里应该得到了bts并打印了出来