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;