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;