Context
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法
image.png
import React from "react";
import ReactDOM from "react-dom";
function F1() {
return (
<div className="red">
111 <F2 />{" "}
</div>
);
}
function F2() {
return (
<div className="red">
222 <F3 />{" "}
</div>
);
}
function F3() {
return (
<div className="red">
333
{/* Consumer包围，进行接收传递的参数 */}
<nContexst.Consumer>
{/* 传递的参数以函数形式进行传递 */}
{x => <F4 n4={x.n} setN={x.setN} />}
</nContexst.Consumer>
</div>
);
}
function F4(props) {
return (
<div className="red">
444,
{props.n4}
<button onClick={props.setN}>CLICK ME</button>
{/* 若想在子组件中修改数据，需要在父组件中传递修改函数 */}
</div>
);
}
const nContexst = React.createContext();
class App extends React.Component {
constructor() {
super();
this.state = {
x: {
n: 67,
setN: () => {
this.setState({
x: {
...this.state.x,
// 保留state的数据，... 拓展保留项，以免setState时重新指向，删除setN函数
n: this.state.x.n + 1
}
});
console.log("执行完毕");
}
}
};
}
render() {
return (
<div className="App">
{/* 用Context.Provider包围，可隐性将state层层传递下去 */}
<nContexst.Provider value={this.state.x}>
<F1 />
</nContexst.Provider>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
