Question

我试图在React中使用钩子和上下文来包装数据共享组件。

我确实尝试将useState应用于我创建的Provider的无状态组件。但事实是，由于此提供程序是无状态的，因此无法在我在DOM中定义的两个不同的提供程序组件之间共享数据。因此，我计划将Provider更改为类组件，并在其外部使用钩子。

这是我编写的代码的一部分，但是问题是我没有在浏览器中显示任何内容，我也不知道为什么。我不确定我的用法在哪里错误。

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 };
}

没有错误信息。即使我只是更改为不使用useState的值，我仍然什么也没有显示。这是否意味着不能以这种方式使用Context.Provider？

Answer 1

您可以在Provider外部提取useState，然后在Context Provider的父级中使用useState。

此外，您应该使用useContext钩子而不是Consumer。

类似这样的东西：

...
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>
)}

然后是子组件

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;

因此，主要的事情不是在提供程序内部使用状态，而是使用父级的状态，然后将其传递给提供程序。还要确保将子组件也与提供程序一起包装。

我正在尝试使用挂钩来管理Context.Provider的状态

1 个答案: