React中父子組件傳值

一.首先我們先來看父組件向子組件傳值

1.1 我們要明白父組件 --> 子組件 是通過props這個屬性來傳值的

我們來看父組件的代碼

import React from 'react'; 
import Son1 from './Son1';
class Father extends React.Component{
    constructor(){
        super();
       
    }
    render(){
        return(
            <React.Fragment>
                {/* 我們在這里引入子組件 並聲明一個屬性str  給他傳一個hello */}
                <Son1 str='hello'></Son1>
            </React.Fragment>
        )
    }

}
export default Father;

接着看子組件

import React from 'react';
class Son1 extends React.Component{
    constructor(){
        super()
    }

    render(){
        return(
            <React.Fragment>
                {/* 子組件通過props 這個屬性來接受父組件傳過來的str */}
                {this.props.str}
            </React.Fragment>
        )
    }

}
export default Son1;

頁面上就可以得到 hello這個值

二. 子組件向父組件傳值

在這里我們分為4個步驟

2.1、在父組件中聲明一個函數，用於接收子組件的傳值

2.2、通過組件屬性的方法，把函數傳遞給子組件

先看父組件的代碼

import React from 'react';  
import Son1 from './Son1';
class Father extends React.Component{
    constructor(){
        super();
       
    }
    // 1、在這里中聲明一個函數，用於接收子組件的傳值
    message(msg){
        // 通過形參接受到子組件的值並打印到控制台  
        console.log(msg)
    }
    render(){
        return(
            <React.Fragment>
              {/* 在這里聲明一個msg屬性，通過組件屬性的方法，把函數傳遞給子組件 */}
                <Son1 msg={this.message}></Son1>
            </React.Fragment>
        )
    }

}
export default Father;

2.3、在子組件中通過props屬性調用父組件的函數，並通過參數傳值

import React from 'react';
class Son1 extends React.Component{
    constructor(){
        super()
    }
    render(){
        return(
            <React.Fragment>
            {/* 在子組件中通過props屬性調用父組件的函數，並通過參數傳值 */}
                {this.props.msg('hello Word')}
            </React.Fragment>
        )
    }

}
export default Son1;

2.4、在父組件中的函數通過形參接收子組件的傳值

這樣就可以看到控制台打印的效果