Question

我不在我的reactjs项目中使用打字稿，但是我仍然想用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，然后将其传递给JSDoc中的@type属性。这是一个应该起作用的代码段：

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中获得的智能： Intellisense after using said component.

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

编辑：我应该解释为什么我包含PropTypes。我遇到了与您同样的问题，并找到了解决方案，但我还需要开发工具来保留组件名称。开发人员工具会显示React.forwardRef而不是实际的组件名称。 displayName属性将起到保留原始名称的作用。

编辑：如果需要在组件本身内部具有自动完成功能，则可以像下面的图像链接那样进行。我已经更新了代码片段以反映这一点。 Autocomplete on ref argument itself.

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

1 个答案: