我如何使用 jsdoc 注释注释 React.forwardRef，以便智能感知可以显示底层组件？

IT技术 javascript reactjs typescript visual-studio-code
2021-05-02 14:18:13

我有一个以这种方式编写为函数的 React 组件：

function Button({ text, icon }) {
  return ...
}

Button.propTypes = {
  text: PropTypes.string.isRequired,
  icon: PropTypes.string.isRequired
}

使用此组件时，我在 vscode 中获得了自动完成/智能感知

如果我将此组件包装在 React.forwardRef 中， export default React.forwardRef((props, ref) => <Button btnRef={ref} {...props} />)

然后我获得了该forwardRef函数的智能感知，这对我的使用没有帮助，因为现在我无法让props自动完成/显示在智能感知中。

我试过React.forwardRef用 jsdoc extends/注释，augments但没有成功，在这种情况下，即使是默认的智能感知也forwardRef停止显示。（我相信这是因为 vscode 比 jsdoc 注释更偏爱可用类型）。有没有办法让我的包装组件的智能感知工作类似于未包装的组件？这将符合我以与未包装组件类似的方式使用包装组件的理解。

1个回答

这取决于你想对这些类型有多迂腐。通常，这些组件的使用与其他功能组件几乎相同，因此最简单的方法是将结果的类型声明为功能组件。props 的技巧是首先为 prop 类型创建一个变量并引用泛型类型的变量（或者至少，我还没有找到一种方法来让它在没有间隙值的情况下工作）：

/**
 * @type React.FC<ButtonPropTypes>
 */
const Button = forwardRef(({ text, icon }, ref) => (
  <button ref={ref}>{text}{icon}</button>
))

const ButtonPropTypes = {
  text: string.isRequired,
  icon: string.isRequired,
  // `ref` isn't a "real" prop, so `prop-types` will not not actually validate
  // this one, but this adds it to the intellisense list if desired. Feel
  // free to just omit it.
  ref: oneOf(shape({ current: any }), func),
}

Button.propTypes = ButtonPropTypes

如果你想更准确，返回类型forwardRef实际上是：

/**
 * @type React.ForwardRefRenderFunction<HTMLButtonElement, ButtonPropTypes>
 */
const Button = forwardRef(({ text, icon }, ref) => (
  <button ref={ref}>{text}{icon}</button>
))

const ButtonPropTypes = {
  text: string.isRequired,
  icon: string.isRequired,
}

Button.propTypes = ButtonPropTypes

但是，IntelliSense 似乎无法识别refprops（工作正常，只是不在列表中）。

类型的定义在这里：https : //github.com/DefinitelyTyped/DefinitelyTyped/blob/3423b4fc3e3da09f8acc386bc2fee6fb8f5e0880/types/react/index.d.ts#L559 第一个参数是分配给值的预期类型参考 但是，由于您实际上并没有静态地输入ref无论如何都会传入的 ，因此您可能只是选择省略带有 的那个?：

/**
 * @type React.ForwardRefRenderFunction<?, ButtonPropTypes>
 */

我认为你对最后一部分的意思是你不会同时拥有未包装和包装的版本。这是典型的模式，因为保留两者并没有真正的用处。但是，顺便propTypes说一句，您可以直接引用任何其他组件的值以用作泛型类型，例如：

/**
 * @type React.FC<UnWrappedButton.propTypes>
 */
其它你可能感兴趣的问题
上一篇打印堆叠在一起的多张照片 下一篇使用 HOC 在 Next.js getInitialProps 中访问消耗的 React.Context