用于动态响应上下文的Typecript键入

时间:2019-09-20 16:47:09

标签: reactjs typescript typescript-generics

我正在创建一个新的上下文 export const SchemaContext = React.createContext(null);

上下文对象创建到组件中,组件将成为上下文的一部分。

type TSchemaProps<M = {}}> = {
  model: M
};


export const Schema = <M,>({
  model: globalModel
}: TSchemaProps<M>) => {
  const [model] = useState<M>(globalModel);

  const context = {
    model,
    isRoot: true
  };

  return (
    <SchemaContext.Provider value={context}> // Type { model: M } is not assignable to null
      {children}
    </SchemaContext.Provider>
  );
};

现在我们可以使用JSX泛型

type TModel = {
    docNum: number,
    docDate: number,
    group: {
        kpp: string,
        orgn: string
    }
};

const MainComp = () => {
  <Schema<TModel> />
}

如何将TModel传递给上下文类型?

1 个答案:

答案 0 :(得分:0)

在生成上下文以定义其值的类型时,可以将generic传递到createContext

type TModel = {
    docNum: number,
    docDate: number,
    group: {
        kpp: string,
        orgn: string
    }
};

...

export const MyContext = createContext<TModel | SomeOtherType>(defaultValues);