如何使一个组件 'extend' 成为另一个组件的道具类型？

Question

我做了一个这样的包装组件：

import WrappedComponent from 'some/external/typed/library'

interface ComponentProps { name: 'foo' | 'bar' }

function Component({ name, ...props}: ComponentProps) {
  return <WrappedComponent foobar={name} {...props} />
}

但是现在有人想知道 Component 接受什么 props 认为它只接受 'name' prop，而实际上它接受 WrappedComponent 接受的所有 props 加上名称 prop。

如何将 ComponentProps 更改为“我接受 WrappedComponent 接受的所有内容，并且 'name'”

Answer 1

你只需要像这样使用Intersection Type：

function Component({ name, ...props}: ComponentProps & React.ComponentProps<typeof WrappedComponent>) {
   return <WrappedComponent foobar={name} {...props} />
}

如果你使用的是 typescript，否则你必须导入定义 WrappedComponent 属性的接口，然后将其用作：

interface ComponentProps extends WrappedComponentProps { name: 'foo' | 'bar' }

如何使一个组件 'extend' 成为另一个组件的道具类型？

How can I make a component 'extend' the prop types of another?

typescript

reactjs

react-props