JSDoc: 如何将React元素设置为函数参数的@param？

Question

在下面的示例中，我应该在JSDoc @param块中添加什么，以使我的IntelliJ Webstorm IDE停止抛出错误：Argument Type ComponentClass<undefined> 不可分配给参数类型 ??? ...`?

/**
 * Renders the passed component into a div
 * @param { ??? } component // Question: <<<
 */
const myRenderFunc = (component) => (
  <div>{component}</div>
)

- clodal

---

我认为如果您不打算创建自己的typedef，则应该使用*。 - Rei Dien

谢谢，我本来希望有内置的集成功能，但现在这样也可以。 - clodal

Answer 1

你的React组件@param类型应该是{ReactElement}

- andr1o

---

此外，为了让代码检查工具正确识别（如果使用JSDoc插件），您需要导入它：import { ReactElement } from "react"。 - Chris Sandvik

Answer 2

使用@typedef的可能解决方案

/**
 * @typedef { import('./Question') } Question
 */

/**
 * Renders the passed component into a div
 * @param { Question } component
 */
const myRenderFunc = (component) => (
  <div>{component}</div>
)

或者如果您不想使用@typedef

/**
 * Renders the passed component into a div
 * @param { import('./Question') } component
 */
const myRenderFunc = (component) => (
  <div>{component}</div>
)

或者如果它不是一个Question组件，只是一个React组件，你可以写React.ReactElement。请注意，您应该在文件中导入React或使用@typedef。

/**
 * Renders the passed component into a div
 * @param { React.ReactElement } component
 */
const myRenderFunc = (component) => (
  <div>{component}</div>
)

- Oguzcan