如何正确记录 React Native 组件的 Props 参数答案

【问题标题】：How to properly document the Props parameter of a React Native component如何正确记录 React Native 组件的 Props 参数
【发布时间】：2022-03-16 19:16:19
【问题描述】：

我正在尝试为我正在处理的应用程序编写 JSDocs，但无论我如何记录组件函数，文档摘要都显示该函数接受类型为“any”的参数 Prop，并且不会显示正确总结 props 应该包含的内容。

例如，在一个函数中，我将其作为我的文档：

 /**
 * JSX Component for displaying selected images in a fullscreen Modal
 * @typedef {object} props
 * @prop {boolean} modalVis state variable boolean for controling modal visibility
 * @prop {callback} setModalVis callback to state function to set modalVis
 * @prop {string} imageUri string uri of the image to be displayed
 * @returns 
 */
const DisplayModal = (props) => {...}

但是当我将函数悬停在代码中的其他位置时，它会给出以下文本：

const DisplayModal: (props: any) => JSX.Element

@typedef - 道具

@returns

screenshot

是否有适当的方法来记录 Props 的预期内容，以便查看函数将提供所需的信息？

【问题讨论】：

标签： react-native jsdoc

【解决方案1】：

这对我很有效。我会这样写。

/**
 * 
 * @param {{ 
 * type: "option1" | "option2" | "option3"
 * onClick: function
 * className: string,
 * styles: React.CSSProperties
 * }} props Props for the component
 * @returns String
 */

【讨论】：