React hooks 文档生成器

Question

在 .jsx 和 .tsx 文件中生成 React 挂钩文档的最佳方式是什么？

我尝试了 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

我用 JSDoc 和 better-docs 插件解决了这个问题。

Answer 2

无法评论@OPearl 的问题，所以我会在这里回答，因为我花了一段时间才弄明白，这似乎是关于这个主题最相关的post。

您可以使用 better-docs 评论功能组件中的方法，但文档中有一些限制不是很清楚。

@component

首先组件需要打上@component标签，需要启用相应的插件，见docs。用@component 标记它会给它一个构造函数状态，让你评论方法并使用其他相关标记，如@memberOf

为了使组件正常显示，您需要在之后单独导出它，所以这是行不通的：

// Not working!
export default function Component()

挂钩

使用@component 标签，您应该能够在组件内部标记方法，但它不能与挂钩一起使用。但是，您可以通过添加 @memberOf 标记在钩子内标记方法。

在功能组件中使用标记方法的示例：

/**
 * 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;

React hooks 文档生成器

React hooks documentation generator

reactjs

documentation

typedoc

@component

挂钩