React 替代 ES6 类

Question

我在一个用于创建药物实例的反应项目中有一个简单的非反应 ES6 class。

export default class Medication {
  constructor(props) {
    ...
  }
  someFunction() {} 
}

const medData = [{name: "med1"}, {name: "med2"}, {name: "med3"}];
const meds = medData.map(med => new Medication(med));

我还有一个设置上下文或提供程序，它保留从后端加载一次并通过上下文提供的设置。

export const SettingContext = React.createContext();

export default class SettingsProvider extends Component {
  constructor(props) {
    super(props);
    this.state = {settings: {...}};
  }
  ...
  render() {
    return (
        <SettingContext.Provider value={{setting: this.state.settings}}>
          {this.props.children}
        </SettingContext.Provider>
    );
  }
}

有没有办法在药物 class 中使用此上下文，以便我可以使用其中的设置？ 什么是 ES6 类的替代方案，然后我可以使用上下文？

Answer 1

创建上下文文件

//context.jsx
import React from "react";
export const initialSetting = { foo: true };
export const SettingContext = React.createContext({
  settings: initialSetting,
  setSettings: () => {}
});

然后创建高阶组件

//HocModule.jsx
import React from "react";
import { SettingContext } from "./context.jsx";
export const HocModule = props => {
  const [settings, setSettings] = React.useState();
  const settingsValue = React.useMemo(() => ({ settings, setSettings }), [
    settings,
    setSettings
  ]);

  return (
    <SettingContext.Provider value={settingsValue}>
      {props.children}
    </SettingContext.Provider>
  );
};

现在任何模块都设置上下文

//AnyModule.jsx

import { SettingContext } from "./context.jsx";
import { HocModule } from "./HocModule";

export const AnyModule = () => {
  const { settings, setSettings } = React.useContext(SettingContext);
  return (
    <HocModule>
      <div>{JSON.stringify(settings)}</div>
    </HocModule>
  );
};

export default AnyModule;

Answer 2

也许你可以试试这个： -

  import { SettingContext } from "import_from_the_module_it_is";
    export default class Medication {
  constructor(props) {
    ...
  }
  someFunction() {
// use your context
const setting = this.context;
} 
}
Medication.contextType = SettingContext;