时间戳

首页 > 解决方案 > 在 Typescript React App 中指定特定的道具并接受一般的 HTML 道具

javascript - 在 Typescript React App 中指定特定的道具并接受一般的 HTML 道具

问题描述

我有一个 React Wrapper 组件，它接受一些道具，但将所有其他道具转发给子组件（尤其是与 className、id 等原生道具相关）。

但是，当我传递原生道具时，Typescript 会抱怨。查看错误信息：

TS2339：类型“IntrinsicAttributes & IntrinsicClassAttributes< Wrapper> & Readonly< { children?: ReactNode; 上不存在属性“className” }> & 只读< WrapperProps>'。

如何获得具有特定道具的组件，该组件也接受本机道具（不接受任何道具并放弃类型检查）？

我的代码如下所示：

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>
}

仅供参考：我在这里发现了一个类似的问题，但答案基本上放弃了类型检查，我想避免这种情况：Link to SO-Question

标签： javascriptreactjstypescriptreact-props

解决方案

我们可以看看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
}

推荐阅读