为数据提供者和数据上下文使用 React Hooks

Question

我目前正在修改我的 DataProvider，使用 React Hooks 将其从类组件更新为功能组件。

我认为我的问题在于我设置上下文使用者的方式，但我还没有找到测试它的好方法。

DataProvider.js

import React, { createContext } from "react";

const DataContext = createContext();

export const DataProvider = (props) => {
  const [test, setTest] = React.useState("Hello");

  return (
    <DataContext.Provider value={test}>{props.children}</DataContext.Provider>
  );
};
export const withContext = (Component) => {
  return function DataContextComponent(props) {
    return (
      <DataContext.Consumer>
        {(globalState) => <Component {...globalState} {...props} />}
      </DataContext.Consumer>
    );
  };
};

所以我的 withContext 函数应该接收一个组件并将其传递给 Context Provider 的 props。

我尝试将我的测试状态拉入组件中。

import React from "react";
import style from "./DesktopAboutUs.module.css";
import { withContext } from "../../DataProvider";

const DesktopAboutUs = ({ test }) => {
  return (
    <div className={style.app}>
      <div>{test}</div>

    </div>
  );
};

export default withContext(DesktopAboutUs);

test 没有数据显示。对我来说，这表明我的 withContext 函数没有正确接收来自 Provider 的道具。

Answer 1

因为您传递了value={test}，所以globalState 是一个字符串，而不是具有test 属性的对象。

这些解决方案中的任何一个都会达到您的预期：

• 如果您希望 globalState 包含多个道具，请使用 value={{ test }} 而不是 value={test} 将对象传递给 DataContext.Provider 的 value 道具。
• 如果您不打算 globalState 包含多个道具，请使用 test={globalState} 而不是 {...globalState} 将 globalState 传递给 Component 的 test 道具。

const DataContext = React.createContext();

const DataProvider = (props) => {
  const [test, setTest] = React.useState("Hello");

  return (
    <DataContext.Provider value={{ test }}>
      {props.children}
    </DataContext.Provider>
  );
};

const withContext = (Component) => (props) => (
  <DataContext.Consumer>
    {(globalState) => <Component {...globalState} {...props} />}
  </DataContext.Consumer>
);

const DesktopAboutUs = ({ test }) => (
  <div>{test}</div>
);

const DesktopAboutUsWithContext = withContext(DesktopAboutUs);

ReactDOM.render(
  <DataProvider>
    <DesktopAboutUsWithContext />
  </DataProvider>,
  document.querySelector('main')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<main></main>