Javascript 反应ES6类的替代方案

我在react项目中有一个简单的非react ES6类，用于创建药物实例

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

export const SettingContext=React.createContext（）；
导出默认类设置Provider扩展组件{
建造师（道具）{
超级（道具）；
this.state={settings:{…}}；
}
...
render（）{
返回(
{this.props.children}
);
}
}

是否有任何方法可以在Medicing类中使用此上下文，以便我可以使用其中的设置？除了ES6类，我还可以使用什么样的上下文呢？

创建上下文文件

//context.jsx
从“React”导入React；
export const initialSetting={foo:true}；
export const SettingContext=React.createContext({
设置：初始设置，
设置设置：（）=>{}
});

然后创建高阶组件

//HocModule.jsx
从“React”导入React；
从“/context.jsx”导入{SettingContext}；
导出常量HocModule=props=>{
const[settings，setSettings]=React.useState（）；
const settingsValue=React.useMoom（（）=>（{settings，setSettings}）[
设置，
设置设置
]);
返回(
{props.children}
);
};

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

//AnyModule.jsx
从“/context.jsx”导入{SettingContext}；
从“/HocModule”导入{HocModule}；
export const AnyModule=（）=>{
const{settings，setSettings}=React.useContext（SettingContext）；
返回(
{JSON.stringify（设置）}
);
};
导出默认模块；

可能是您可以尝试以下方法：-

  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;

---

您在哪里初始化这些实例？如果在React组件内部执行此操作，则可以将上下文值作为参数传递，但不能在组件外部使用上下文。我通常发现React不能很好地与泛型ES6类一起工作，因为它通常与React中的状态管理冲突。更改状态的类方法需要反映在React的状态中，以触发DOM中的必要更改。在非React类中，使用

const-context=React.useContext（SettingContext）

，然后您就可以访问它。对于类型化版本

const-context:React.ContextType=React.useContext（设置上下文）@Amir Mousavi，它只在ES6类的函数中工作，但对我来说是有效的，所以谢谢。它在构造函数内部或作为静态值不起作用。@ChrisB。是的，我在react组件中初始化它，但我希望在类中设置，而不是通过函数传递它。我还感觉React不能很好地与通用ES6类配合使用。我是react的新手，我对如何构建一个好的体系结构感兴趣。也许您不是在react中编写简单的类，而是在导入和使用的函数库中编写。我不知道=）我试过了，阿米尔·穆萨维就是这么说的。到目前为止，这是可行的，但是在测试中我得到了这个错误消息：无效的钩子调用。钩子只能在函数组件的主体内部调用。