React的父子元件通信

首先要知道React的元件間通訊是單向的。資料必須是由父級傳到子級或者子級傳遞給父級層層傳遞。

如果要給兄弟級的元件傳遞資料，那麼就要先傳遞給公共的父級而後在傳遞給你要傳遞到的元件位置。【一般這種不推薦層層傳遞，可以選擇維護全局狀态】

父級元件向子級元件傳遞資料

在React中，父元件可以向子元件通過傳props的方式，向子元件進行通訊。

父元件 App.js

import React, { Component } from 'react';
import Child from './child'
export default class App extends Component {
	constructor(props){
	    super(props);
	    this.state={
	        msg:'父類的消息',
	        name:'John',
	        age:99
	    }
	}
    callback = (msg, name, age) => {
        // setState方法,修改msg的值,值是由child裡面傳過來的
        this.setState({
        	msg,
        	name,
        	age,
        });
    }
	render() {
	 return (
	   <>
	     <p> Message:  {this.state.msg}</p>
	     <Child callback={this.callback} age={this.state.age} name={this.state.name}></Child>
	   </>
	 );
	}
}
           

父元件中，state裡面有三個屬性，分别是msg，name和age，在子元件child中，如果想拿到父元件裡面的資料，就需要通過props傳遞。

在<Child />标簽裡面添加

<Child name={this.state.name} age={this.state.age} />
           

name和age分别是你要傳遞的屬性。

子元件 Child

import React from "react";
export default class Child extends React.Component{
	state = {
        name:'Andy',
        age:31,
        msg:"來自子類的消息"
    }
	change = () => {
	 	this.props.callback(this.state.msg, this.state.name, this.state.age);
	}
    render() {
        return(
            <>
                <div>{this.props.name}</div>
                <div>{this.props.age}</div>
                <button onClick={this.change}>點選</button>
            </>
        )
    }
}
           

在子元件中,通過 {this.props.name} {this.props.age}就能拿到父元件裡面的資料。

呈現在頁面上的就是這個樣子。

其中 John和99均來自于父元件App.js

子元件向父元件通信