1.props傳值
主要步驟：
在父組件中引用子組件時，在子組件上面寫入name1={name2}格式進行傳值，name1為子組件中對應的用于接收數據的字段名稱，name2為父組件中需要傳遞到子組件中的值（state中聲明的數據）；要在子組件中調用父組件的方法修改父組件的值可以用同樣的方法將函數傳入到子組件。相關代碼如下：
父組件：parent.js

import React, { Component } from "react";
import Son from "./son";export class parent extends Component {state = {name: "前端大佬",msg: "哈哈哈",};//   如果要用子組件改父組件的值就觸發該方法parentChange = (data) => {this.setState({ msg: data });};render() {let { name, msg } = this.state;return (<div><h1>parent page</h1><p>姓名：{name}</p><p>信息：{msg}</p><Son name={name} msg={msg} parentChange={this.parentChange} />{/* {...this.state}傳遞state中的所有值 */}{/* <Son {...this.state} parentChange={this.parentChange} /> */}</div>);}
}export default parent;

子組件：son.js

import React, { Component } from "react";
import PropTypes from "prop-types";export class son extends Component {//   state = {//     name: "前端新手",//     msg: "略略略",//   };constructor(props) {super();this.state = {name: "前端新手",msg: "略略略",//   parentMsg: props.msg,};}handleChange = (e) => {// this.setState({ parentMsg: e.target.value });this.props.parentChange(e.target.value);};render() {let { name, msg, parentMsg } = this.state;let { name: pName, msg: pMsg } = this.props;// 父子組件中用到同樣的屬性名稱的時候一般用別名區分return (<div><h1>son page</h1><p>姓名：{name}</p><p>信息：{msg}</p><p>資深前端介紹信息：{pName}--{pMsg}</p><input type="text" defaultValue={pMsg} onChange={this.handleChange} /></div>);}
}// 使用props校驗
son.propTypes = {name: PropTypes.string,msg: PropTypes.string.isRequired,
};
// 未傳遞值時會顯示以下默認值
son.defaultProps = {name: "1",msg: "2",
};export default son;

2.context傳值
主要步驟：
先創建一個context對象，并導出；
在使用的組件中導入該對象；
使用<MainContext.Provider>包裹組件元素；
在組件內部通過聲明static contextType = MainContext或者組件.contextType = MainContext或者使用<MainContext.Consumer>包裹組件元素利用函數調用的方式來使用。相關代碼如下：
context.js

import React from "react";
// 創建一個context對象，組件會從組件樹中離自身最近的那個匹配的Provider中讀取到當前的context值
const MainContext = React.createContext({ name: "哈哈" }); // 默認值export default MainContext;

hello.js

import React, { Component } from "react";
import MainContext from "./context";
import World from "./word";export class hello extends Component {// static contextType = MainContext;render() {return (<div>這是hello組件，是父組件{this.context.name}<World /></div>);}
}// 用Class.contextType掛載在class上，然后使用this.context來消費最近Context上的那個值
// 可以在任何生命周期中訪問到它，包括render函數中。（多用于類組件）
hello.contextType = MainContext;export default hello;

word.js

import React, { Component } from "react";
import MainContext from "./context";export class word extends Component {render() {return (<div><MainContext.Consumer>{(context) => {console.log(context);return <div>這是word組件，是孫組件-{context.name}</div>;}}</MainContext.Consumer></div>);}
}export default word;

main.js

import React, { Component } from "react";
import Hello from "./hello";
import MainContext from "./context";export class main extends Component {render() {let obj = { name: "ernest" };return (<div><MainContext.Provider value={obj}>main組件<Hello /></MainContext.Provider>{/* 不使用MainContext.Provider時context中的默認值才會生效 */}</div>);}
}export default main;