React父子组件、兄弟组件、跨层传递Context通信

父传子

1.父组件提供传递的数据 state
2.给组件标签添加属性值为state中的数据
3.子组件中通过props接收props对象的数据
1）类组件使用this.props获取props对象
2）函数组件直接通过参数获取props对象

//子函数组件
function Nams(e) {
return <div>函数+{e.msga}</div>;
}
// 子类组件
//获取需要this.props来获取
class Hello extends React.Component {
state = {};
render() {
return <div onClick={this.props.getMes}>类+{this.props.msgb}</div>;
}
}
// 父组件
class App extends React.Component {
state = {
msg: "数据",
};
getMes = () => {
console.log("父组件函数");
};
render() {
return (
<>
<Nams msga={this.state.msg}></Nams>
<Hello msgb={this.state.msg} getMes={this.getMes}></Hello>
</>
);
}
}

子传父

1.子组件调用父组件传递的函数，并把想要的数据当成函数的实参
2.传入即可

//子函数组件
function Nams(e) {
const { getMes } = e;
return <div onClick={() => getMes("传递给父组件的数据")}>函数+{e.msga}</div>;
}
// 父组件
class App extends React.Component {
state = {
msg: "数据",
array: [1, 2, 3],
obj: {
name: 1,
name1: 2,
},
};
getMes = (e) => {
console.log("父组件函数", "子组件数据" + e);
};
render() {
return (
<>
<Nams msga={this.state.msg} getMes={this.getMes}></Nams>
</>
);
}
}

兄弟组件通信（子B-父-子A）

1.操作如上，子组件将数据传递给父组件
2.在父组件的函数中接收后this.setState({})，
将数据更新到父组件的state中然后在组件A中父传子

import React from 'react'

// 子组件A
function SonA(props) {
  return (
    <div>
      SonA
      {props.msg}
    </div>
  )
}
// 子组件B
function SonB(props) {
  return (
    <div>
      SonB
      <button onClick={() => props.changeMsg('new message')}>changeMsg</button>
    </div>
  )
}

// 父组件
class App extends React.Component {
  // 父组件提供状态数据
  state = {
    message: 'this is message'
  }
  // 父组件提供修改数据的方法
  changeMsg = (newMsg) => {
    this.setState({
      message: newMsg
    })
  }

  render() {
    return (
      <>
        {/* 接收数据的组件 */}
        <SonA msg={this.state.message} />
        {/* 修改数据的组件 */}
        <SonB changeMsg={this.changeMsg} />
      </>
    )
  }
}

export default App

跨层传递Context

1.创建Context对象导出Provider和Consumer对象

const{Provider,Consumer}=createContext()

2.使用Provider包裹根组件提供数据

<Provider value={this.state.message}>
{/* 根组件 */}
</Provider>

3.需要用到数据的组件使用Consumer包裹获取数据

<Consumer>
{value=> /* 基于 context 值进行渲染*/}
</Consumer>

如：

import React, { createContext } from "react";
import "./App.css";
const { Provider, Consumer } = createContext();
//子函数组件a
function Coma(e) {
return (
<div>
A
<Comb />
</div>
);
}
//子函数组件b
function Comb(e) {
return (
<div>
传递的数据+
<Consumer>{(value) => <div>{value}</div>}</Consumer>
</div>
);
}
// 父组件
class App extends React.Component {
state = {
msga: "父组件",
};
getMes = (e) => {
console.log("父组件函数", "子组件数据" + e);
};
render() {
return (
<Provider value={this.state.msga}>
<>
<Coma msga={this.state.msg} getMes={this.state.msga} />
</>
</Provider>
);
}
}

export default App;