如何制作具有泛型类型的功能性 React 组件？

Question

我正在尝试制作一个接收泛型类型参数的 React 组件，该类型参数将成为其 prop 类型的一部分。

我想要一个看起来像这样的解决方案：

interface TestProps<T> {
  value: T;
  onChange: (newValue: T) => void;
}

const Test: React.FC<TestProps<T>> = (props) => (
  <span>{props.value}</span>
);

我已经看到 TypeScript 2.9 对此提供了支持，而我正在使用 4.3.5。

它的用法如下所示：

const Usage: React.FC = () => (
  <div>
    <Test<Obj>
      value={{ name: 'test' }}
      onChange={(newValue) => {
        console.log(newValue.name);
      }}
    />
  </div>
);

代码沙箱：https://codesandbox.io/s/react-typescript-playground-forked-8hu13?file=/src/index.tsx

Answer 1

最简单的方法是使泛型 FC 成为常规函数，而不是箭头函数。 （React.PropsWithChildren<> 模拟 React.FC 对您的 props 类型所做的事情。）

function Test<T>(props: React.PropsWithChildren<TestProps<T>>) {
    return <span>Some component logic</span>;
}

Answer 2

你需要用这种方式重写你的Test组件

const Test= <T,>(props:TestProps<T>) => (
    <span>Some component logic</span>
);

你能用 React.FC 做同样的事情吗？ FC是不可能的。

这是FC 实现：

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  // ... other static properties
}

您可能已经注意到，FC 是一种函数类型，而不是道具类型。

更新

你可以创建高阶函数，但我不确定它是否值得

const WithGeneric = <T,>(): React.FC<TestProps<T>> =>
  (props: TestProps<T>) => (
    <span>Some component logic</span>
  );
const Test = WithGeneric<Obj>()