使用React.fowardRef和useImperativeHandle时如何创建ref的JSDoc？

Question

我没有在我的reactjs项目中使用typescript，但我仍然想用JSDocs来记录我的组件。

问题在于我有一个带有

React.forwardRef

的功能组件，我想为引用创建一个 JSDoc，因为我正在使用

useImperativeHandle

并将不同的值传递给引用。

可以使用 JSDoc 记录

ref

来显示我传入的方法和属性

useImperativeHandle

？如果是的话，怎么办？

哪里有我想要的例子

在组件中，我使用

React.fowardRef

和

useImperativeHandle

export const Foo = React.fowardRef((props, ref) => {

    useImperativeHandle(ref, () => ({
        myMethod,
        // other methods and properties
    }))

    return <div>{/* ... */}</div>
}

当将该组件与

ref

一起使用

fooRef.current

时，我想在键入

myMethod

或按

.

+

Ctrl

时看到

Space

或其他属性。

Answer 1

虽然我不知道这是否是完美的解决方案，但对我来说有效的只是为所有道具（包括 ref）编写一个 typedef，然后将其传递给 @type 属性，所有这些都在 JSDoc 中。 这是应该有效的片段：

import React from 'react';
import PropTypes from 'prop-types';

/**
 * @typedef {Object} RefType
 * @property {Object} current
 * @property {() => void} current.methodOne
 * @property {() => void} current.methodTwo
 */

/**
 * @typedef {Object} Props
 * @property {RefType} ref
 * @property {string} value
 * @property {((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined} onChange
 */

/**
 * @type {React.FC<Props>}
 */
export const Input = React.forwardRef((
  props, 
  /** @type {RefType} */
  ref) => {
  return <input ref={ref} onChange={props.onChange} value={props.value} />
})

Input.propTypes = {
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
};

Input.displayName = 'Input';

因此，当我使用该组件时，以下是我在 VSCode 中获得的智能感知：

智能感知应该在整个项目中发挥作用。

编辑：我应该解释为什么我包含 PropTypes。我遇到了与您相同的问题，并找到了解决方案，但我还需要开发工具来保留组件名称。开发工具将显示

React.forwardRef

而不是真实的组件名称。

displayName

属性可以保留原始名称。

编辑：如果您需要在组件本身内部进行自动完成，您可以像下面的图像链接一样进行操作。我已经更新了代码片段以反映这一点。

Answer 2

这样写：

/** @type {React.MutableRefObject<YourTypeHere>} */
const ref = useRef()

Answer 3

我设法在

useImperativeHandle

上声明的函数上添加 jsDoc，如下所示。在我的实例中，我使用的是打字稿，但我相信如果您将 jsDoc 添加到内部函数声明的上方，您也可以做同样的事情

useImperativeHandle

type ComponentProps = {}
type ComponentRefProps = {
    /**
     * here is the description of the function
     * @param param1 
     * @param param1 
     * @returns nothing for now
     */
    yourFunction: (param1: any, param2: any) => void
}
const CustomComponent = forwardRef<ComponentRefProps, ComponentProps>((props, ref) => {
    useImperativeHandle(ref, () => ({
        yourFunction(param1, param2) {
            
        },
    }), [])
    return <Text>This is a component</Text>
})