小编典典

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

reactjs

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

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


阅读 550

收藏
2020-07-22

共1个答案

小编典典

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

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

如果将其React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>,HTMLDivElement>用作基本类型,则将具有的所有属性div。由于DetailedHTMLProps刚刚添加refReact.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
}
2020-07-22