ReactJS编写无状态函数注释

Question

为ReactJS无状态函数编写注释的推荐方法是什么？

假设我有以下代码:

export const LoginForm = ({ submitting, handleSubmit }) => (
  <form onSubmit={handleSubmit(submit)}> ...(code)... </form>
));

文档评论应该如何？

我的第一个想法是:

/**
 * Form for user login
 * @param {bool} submitting Shows if form submitting is in progress
 * @param {function} handleSubmit Form submit callback function
 */

但是,这是不是为正确submitting而handleSubmit不是真正的PARAMS LoginForm功能.它们只是props参数的关键.另一方面,记录props为参数LoginForm似乎毫无意义,因为每个反应组件都有props一个参数,而道具键是函数最重要的部分.

有官方指导方针吗？(我没找到)

---

编辑

我还PropTypes定义了:

LoginForm.propTypes = {
  submitting: PropTypes.bool,
  handleSubmit: PropTypes.func.isRequired,
};

也许这是道具相关文档的地方？如果是这样,应该怎么样？那有什么标准吗？

Answer 1

您可以props在属性名称之前指定对象:

/**
 * Form for user login
 * @param {object} props Component props
 * @param {bool} props.submitting Shows if form submitting is in progress
 * @param {function} props.handleSubmit Form submit callback function
 */
export const LoginForm = ({ submitting, handleSubmit }) => (
  <form onSubmit={handleSubmit(submit)}> ...(code)... </form>
));

有关详细信息,请参阅部分中的@param wiki页面Parameters With Properties.

Answer 2

我知道我参加这个聚会几乎晚了 3 年。仅供参考。可以这样做：

/**
 * @typedef {Object<string, any>} Props
 * @property {boolean} submitting Shows if form submitting is in progress
 * @property {function} handleSubmit Form submit callback function
 */

/** 
 * Form for user login
 *
 * @type {import('react').FunctionComponentElement<Props>}
 */
export const LoginForm = ({ submitting, handleSubmit }) => (
    <form onSubmit={handleSubmit(submit)}> ...(code)... </form>
);

为简洁起见，还可以这样做：

/**
 * Form for user login
 *
 * @type {import('react').FunctionComponentElement<{
       submitting: boolean,
       handleSubmit: function
    }>}
 */
export const LoginForm = ({ submitting, handleSubmit }) => (
    <form onSubmit={handleSubmit(submit)}> ...(code)... </form>
);

如果在您的 IDE 中启用了 Typescript，您可以避免在此设置中完全声明 prop-types。