Question

我正在寻找一种描述TS中React道具类型的正确方法。

我的道具道具是这样的：

interface Props {
  prop1: number,
  prop2: string,
}

但是我的组件也接受className作为道具（例如_myClassName可以转换为类my-class-name）。

TS上面的道具类型会显示错误_myClassName doesn't exist on type Props。我尝试将“道具”更改为：

interface Props{
  prop1: number,
  prop2: string,
  [className: string]: any,
}

但是在那种情况下，TS不会检查prop1和prop2的类型。以下代码不会产生错误：

<MyComponent prop1="some-string" /> // prop1 must be a number

那么，有没有正确的方法来处理这种情况？

Answer 1

我找到了解决方案。对于将面临相同问题的每个人：

interface Props {
  prop1: number,
  prop2: string,
}

export const MyComponent = <P extends Props>(props: P): React.ReactElement | null => {
  // code here
};

结果是：

<MyComponent prop1="some-string" /> // error, prop1 must be a number

<MyComponent prop1={0} prop2="some-string" _myClassName /> // no error on additional prop, other props type checks

React道具中的索引签名

1 个答案: