我有一个React Wrapper组件,它接受一些道具,但将所有其他道具转发给子组件(尤其是对诸如className,id等本机道具的relevent)。
但是,当我通过本地道具时,打字稿抱怨。查看错误消息:
TS2339:类型’IntrinsicAttributes和IntrinsicClassAttributes <包装器>&Readonly <{子代?:ReactNode;}>和Readonly ”。
我如何获得带有特定道具的组件,该组件也接受本机道具( 不 接受任何道具并放弃类型检查)?
我的代码如下所示:
interface WrapperProps extends JSX.IntrinsicAttributes { callback?: Function } export class Wrapper extends React.Component<WrapperProps>{ render() { const { callback, children, ...rest } = this.props; return <div {...rest}> {children} </div>; } } export const Test = () => { return <Wrapper className="test">Hi there</Wrapper> }
仅供参考:我在这里找到了类似的问题,但是答案基本上放弃了类型检查
我们可以看看divprops的定义方式:
div
interface IntrinsicElements { div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>; }
如果将其React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>,HTMLDivElement>用作基本类型,则将具有的所有属性div。由于DetailedHTMLProps刚刚添加ref,React.HTMLAttributes<HTMLDivElement>我们可以将其用作获取所有div属性的基本接口:
React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>,HTMLDivElement>
DetailedHTMLProps
ref
React.HTMLAttributes<HTMLDivElement>
interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> { callback?: Function } export class Wrapper extends React.Component<WrapperProps>{ render() { const { callback, children, ...rest } = this.props; return <div {...rest}> {children} </div>; } } export const Test = () => { return <Wrapper className="test">Hi there</Wrapper> // works now }