在Typescript React App中指定特定的道具并接受常规的HTML道具

Question

我有一个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>
}

仅供参考：我在这里找到了类似的问题，但是答案基本上放弃了类型检查

Answer 1

我们可以看看divprops的定义方式：

interface IntrinsicElements {
    div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
}

如果将其React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>,HTMLDivElement>用作基本类型，则将具有的所有属性div。由于DetailedHTMLProps刚刚添加ref，React.HTMLAttributes<HTMLDivElement>我们可以将其用作获取所有div属性的基本接口：

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
}