[英]I am attempting to use hooks to manage the state of Context.Provider
I tried to wrap a data shared component with using hooks and context in react. 我试图在反应中使用钩子和上下文来包装数据共享组件。
I did try to use useState into a stateless component of Provider that I created. 我确实尝试将useState应用于我创建的Provider的无状态组件。 But the thing is because this Provider is stateless, data cannot be shared within two different Provider components I define in DOM.
但事实是,由于此提供程序是无状态的,因此无法在我在DOM中定义的两个不同的提供程序组件之间共享数据。 So I plan to change Provider to a class component and use hooks outside of it.
因此,我计划将Provider更改为类组件,并在其外部使用钩子。
And this is the part of the code I wrote but the problem is I get nothing displayed in the browser and I don't know why. 这是我编写的代码的一部分,但是问题是我没有在浏览器中显示任何内容,我也不知道为什么。 I am not sure where my usage is wrong.
我不确定我的用法在哪里错误。
function createCTX(defaultProps) {
const CTX = React.createContext(defaultProps);
const HookComponent = Component => {
const testComponent = () => {
const [newProps, setData] = useState(defaultProps);
return <Component newProps={newProps} setData={setData} />;
};
return testComponent;
};
class Provider extend React.Component {
constructor(props) {
super(props);
const {
newProps,
setData
} = props;
this.state = {
Props: newProps,
setData
}
}
render() {
return <CTX.Provider value={this.state}>{this.props.children}
</CTX.Provider>;
}
}
class Consumer extends React.Component {
render() {
return (
...
);
}
}
const ProviderComponent = HookComponent(Provider);
return { ProviderComponent, Consumer };
}
There is no error message. 没有错误信息。 And even I just change to without using the values of useState, I still get nothing displayed.
即使我只是更改为不使用useState的值,我仍然什么也没有显示。 Does that mean Context.Provider cannot be used in this way?
这是否意味着不能以这种方式使用Context.Provider?
You can extract the useState outside the Provider and then use the useState in the parent of the Context Provider. 您可以在Provider外部提取useState,然后在Context Provider的父级中使用useState。
Also you should use the useContext hook instead of the Consumer. 另外,您应该使用useContext挂钩而不是Consumer。
Something like this: 像这样:
...
const Context = React.createContext()
...
const App = () => {
const [state, setState] = useState("Some Text")
const changeText = () => {
setState("Some Other Text")
}
...
<h1> Basic Hook useContext</h1>
<Context.Provider value={{changeTextProp: changeText,
stateProp: state
}} >
<TestHookContext />
</Context.Provider>
)}
then the child component 然后是子组件
import React, { useContext } from 'react';
import Context from '../store/context';
const TestHookContext = () => {
const context = useContext(Context)
return (
<div>
<button onClick={context.changeTextProp}>
Change Text
</button>
<p>{context.stateProp}</p>
</div>
)
}
export default TestHookContext;
SO the main thing is not to use state inside the provider but use state from a parent then pass it in to the provider. 因此,最主要的不是在提供者内部使用状态,而是从父级使用状态,然后将其传递给提供者。 Also make sure to wrap the child components with the provider as well.
还要确保将子组件也与提供程序一起包装。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.