reactjs - React hooks 文档生成器

Question

在 .jsx 和 .tsx 文件中为 React 钩子(Hook)生成文档的最佳方法是什么？

我尝试了 TypeDoc，但我没有从函数方法中得到任何评论。

const MainFunction = () => {

  /**
   * How to get generate this comment?
   * 
   * @param a first number
   * @param b second number
   * 
   * @returns sum of and b
   */
  const sumNumbers = (a, b) => {
    return a + b;
  }
}

Answer 1

无法评论@OPearl 问题，所以我会在这里回答，因为我花了一段时间才弄清楚，这似乎是关于这个主题的最相关的帖子。
您可以使用更好的文档来评论功能组件中的方法，但是文档中存在一些不太清楚的限制。
@零件
首先组件需要打上@component标签，需要开启对应的插件，见docs .用@component 标记它会给它一个构造函数状态，让您可以评论方法并使用其他相关标签，如@memberOf
为了使组件正确显示，您需要在之后单独导出它，所以这不起作用:

// Not working!
export default function Component()

Hook
随着@component 标签的工作，您应该能够标记组件内的方法，但它不适用于钩子(Hook)。但是，您可以做的是通过添加 @memberOf 标记来标记钩子(Hook)内的方法。
功能组件中工作标记方法的示例:

/**
 * Component comment
 *
 * @component
 */
function ExampleComponent(props) {
  /**
   * Method comment
   *
   * @param {string} foo - Foo description
   */
  function testFunction(foo) {
    // do something
  }

  useEffect(() => {
    /**
     * Method comment
     *
     * @param {number} bar - Bar description
     * @memberOf ExampleComponent
     */
    function testEffect(bar) {
      // do something
    }
    testEffect(1);
  }, []);

  return <div>foobar</div>;
}

export default ExampleComponent;