Reactjs 用泛型来反应上下文

如何在React.CreateContext中使用泛型

我有这个：

interface Props {
}

export interface SearchContextProps {
  dtos: any[];
}

export const SearchContext = React.createContext<SearchContextProps>({
  dtos: []
});

const SearchPage: React.FunctionComponent<Props> = (props) => {
  const [dtos, setDtos] = React.useState<any[]>([]);

  const searchContext = {
    dtos: dtos
  };

  return (
    <SearchContext.Provider value={searchContext}>
      ...
    </SearchContext.Provider>
  );
}

export default SearchPage;

界面道具{
}
导出接口SearchContextProps{
DTO：任何[]；
}
export const SearchContext=React.createContext({
DTO:[]
});
const SearchPage:React.FunctionComponent=（道具）=>{
const[dtos，setDtos]=React.useState（[]）；
const searchContext={
dtos:dtos
};
返回(
...
);
}
导出默认搜索页面；

现在我想使用泛型，所以我会写一些类似的东西：

interface Props<T> {
}

export interface SearchContextProps<T> {
  dtos: T[];
}

export const SearchContext = React.createContext<SearchContextProps<T>>({
  dtos: []
});

const SearchPage = <T extends object>(props: Props<T>) => {
  const [dtos, setDtos] = React.useState<T[]>([]);

  const searchContext = {
    dtos: dtos
  };

  return (
    <SearchContext.Provider value={searchContext}>
      ...
    </SearchContext.Provider>
  );
}

export default SearchPage;

界面道具{
}
导出接口SearchContextProps{
dtos:T[]；
}
export const SearchContext=React.createContext({
DTO:[]
});
const SearchPage=（道具：道具）=>{
const[dtos，setDtos]=React.useState（[]）；
const searchContext={
dtos:dtos
};
返回(
...
);
}
导出默认搜索页面；

但我不知道我该如何去工作：

export const SearchContext = React.createContext<SearchContextProps<T>>({

export const SearchContext=React.createContext({

我如何在这里使用泛型，如何访问T

我尝试在组件内移动上下文：

interface Props<T> {
}

export interface SearchContextProps<T> {
  dtos: T[];
}

const SearchPage = <T extends object>(props: Props<T>) => {
  const [dtos, setDtos] = React.useState<T[]>([]);

  const SearchContext = React.createContext<SearchContextProps<T>>({
    dtos: [],
  });

  const searchContext = {
    dtos: dtos,
  };

  return (
    <SearchContext.Provider value={searchContext}>
      ...
    </SearchContext.Provider>
  );

}

export default SearchPage;

界面道具{
}
导出接口SearchContextProps{
dtos:T[]；
}
const SearchPage=（道具：道具）=>{
const[dtos，setDtos]=React.useState（[]）；
const SearchContext=React.createContext({
DTO:[]，
});
const searchContext={
dtos:dtos，
};
返回(
...
);
}
导出默认搜索页面；

但现在我不知道如何出口它

有什么帮助吗？

我最终得到了：

import * as React from 'react';

interface Props<T> {}

export interface SearchContextProps<T> {
  dtos: T[];
}

export const SearchContext = React.createContext<SearchContextProps<any>>({
  dtos: [],
});

const SearchPage = <T extends object>(props: React.PropsWithChildren<Props<T>>) => {
  const [dtos, setDtos] = React.useState<T[]>([]);

  const searchContext = {
    dtos: dtos,
  };

  return <SearchContext.Provider value={searchContext}>...</SearchContext.Provider>;
};

export default SearchPage;

import*as React from'React'；
接口道具{}
导出接口SearchContextProps{
dtos:T[]；
}
export const SearchContext=React.createContext({
DTO:[]，
});
const SearchPage=（props:React.PropsWithChildren）=>{
const[dtos，setDtos]=React.useState（[]）；
const searchContext={
dtos:dtos，
};
返回。。。；
};
导出默认搜索页面；

以及消费者

const searchContext = React.useContext<SearchContextProps<Interfaces.FileDto>>(SearchContext)

const searchContext=React.useContext（searchContext）

我也尝试了一段时间，终于用我正在构建atm的向导解决了这个问题

提供程序部分与您的类似：

import React, { Dispatch, SetStateAction } from "react";

export interface IWizardContext<T> {
  formData: T;
  setFormData: Dispatch<SetStateAction<T>>;
}

export const WizardContext = React.createContext<IWizardContext<any>>({
  formData: {},
  setFormData: () => {},
});

const WizardProvider: React.FC = (props) => {
  const [formData, setFormData] = React.useState<any>({});

  return (
    <WizardContext.Provider
      value={{
        formData: formData,
        setFormData: setFormData,
      }}
    >
      {props.children}
    </WizardContext.Provider>
  );
};

export default WizardProvider;

export function withWizardProvider<TProps = {}>(component: React.FC<TProps>) {
  const Component = component;

  return ((props: TProps) => {
    return (
      <WizardProvider>
        <Component {...props} />
      </WizardProvider>
    );
  }) as React.FC<TProps>;
}

import React，{Dispatch，SetStateAction}来自“React”；
导出接口IWizardContext{
formData:T；
setFormData：调度；
}
导出常量向导上下文=React.createContext({
formData:{}，
setFormData:（）=>{}，
});
常量向导提供程序：React.FC=（道具）=>{
const[formData，setFormData]=React.useState（{}）；
返回(
{props.children}
);
};
导出默认向导提供程序；
使用WizardProvider导出函数（组件：React.FC）{
常数分量=分量；
返回（（道具：TProps）=>{
返回(
);
})as.FC；
}

消费者：

import React from "react";
import {
  IWizardContext,
  withWizardProvider,
  WizardContext,
} from "./WizardProvider";

interface ISampleWizardState {
  name?: string;
  lastName?: string;
}

const SampleWizard: React.FC = (props) => {
  const wizard = React.useContext<IWizardContext<ISampleWizardState>>(
    WizardContext
  );

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "flex-start",
        flexDirection: "column",
      }}
    >
      <span>{`${wizard.formData.name || "John"} ${
        wizard.formData.lastName || "Doe"
      }`}</span>
      <input
        type="text"
        name="name"
        value={wizard.formData.name}
        onChange={(e) => {
          const text = e?.target?.value;
          wizard.setFormData((prev) => ({
            ...prev,
            name: text,
          }));
        }}
      />
      <input
        type="text"
        name="lastName"
        value={wizard.formData.lastName}
        onChange={(e) => {
          const text = e?.target?.value;
          wizard.setFormData((prev) => ({
            ...prev,
            lastName: text,
          }));
        }}
      />
    </div>
  );
};

export default withWizardProvider(SampleWizard);

从“React”导入React；
进口{
IWizardContext，
使用向导提供程序，
WizardContext，
}来自“/WizardProvider”；
接口是简单的向导状态{
名称？：字符串；
lastName？：字符串；
}
const SampleWizard:React.FC=（道具）=>{
const wizard=React.useContext(
向导上下文
);
返回(
{`${wizard.formData.name | |“John”}${
wizard.formData.lastName | |“Doe”
}`}
{
常量文本=e？目标？值；
wizard.setFormData（（上一个）=>({
…上一页，
名称：文本，
}));
}}
/>
{
常量文本=e？目标？值；
wizard.setFormData（（上一个）=>({
…上一页，
姓氏：text，
}));
}}
/>
);
};
使用向导提供程序导出默认值（SampleWizard）；

因此，消费者的主要任务是在useContext中定义您的T：

React.useContext<IWizardContext<ISampleWizardState>>(WizardContext);

React.useContext（向导上下文）；

Hi Simone，我目前正在处理同一主题。你找到解决方案了吗？是的，请看我自己的答案。你能添加SearchContext.Consumer？React.useContext（SearchContext）的示例吗