MyContext.js
import React from "react";
const MyContext = React.createContext('test');
export default MyContext;
Создал отдельный js файл контекста, в котором я могу получить доступ как в родительском, так и в моем дочернем компоненте
Parent.js
import MyContext from "./MyContext.js";
import Child from "./Child.js";
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
Message: "Welcome React",
ReturnMessage:""
};
}
render() {
return (
<MyContext.Provider value={{state: this.state}}>
<Child />
</MyContext.Provider>
)
}
}
Таким образом, создан родительский компонент с контекстом поставщика и вызовом дочернего компонента на вкладке поставщика
Child.js
import MyContext from "./MyContext.js";
class Child extends Component {
constructor(props) {
super(props);
this.state = {
ReturnMessage:""
};
}
ClearData(context){
this.setState({
ReturnMessage:e.target.value
});
context.state.ReturnMessage = ReturnMessage
}
render() {
return (
<MyContext.Consumer>
{(context) => <p>{context.state.Message}</p>}
<input onChange={this.ClearData(context)} />
</MyContext.Consumer>
)
}
}
Таким образом, у ребенка с помощью потребителя может отображаться часть дочернего рендеринга.
Я столкнулся с обновлением от потребителя до состояния поставщика.
Как обновить состояние поставщика или управлять состоянием поставщика.