如何确保 React 组件在 TypeScript 中具有 'key' 属性

Question

如何键入打字稿变量，以便它需要具有该key集合的组件？

我想要这样的东西：

const foo: ReactElementWithKey = <div key="some key"></div> 
// all ok

const bar: ReactElementWithKey = <div></div> 
// no `key` - typescript should show an error

我应该如何定义ReactElementWithKey？

我尝试过类似的事情：

type ReactElementWithKey = React.ReactElement<{ key: React.Key }>;

但它不起作用 - 没有的组件key被接受就好了。

Answer 1

key是一个我们可以传递给任何组件以帮助与渲染逻辑做出反应的值。您可能已经看到 key 被用作循环逻辑的一部分。与此类似，任何组件都可以有一个属性key，该属性将在更改时强制组件重新渲染key。换句话说，它是为react保留的。如果您的目的不同，我建议使用其他名称。

这就是我在打字稿反应项目中定义类型的方式。

interface ITestComponentProps {//your prop types here}

const TestComponent: React.FC<ITestComponentProps> = (props) => {
  return <>Some JSX</>
}