React Native - 如何记录组件？答案

【问题标题】：React Native - How to document a component?React Native - 如何记录组件？
【发布时间】：2022-02-02 02:34:51
【问题描述】：

你如何评论一个 React 组件？

import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';
import PropTypes from "prop-types";

const PizzaTranslator = ({ pizzaEmoji = '????'}) => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here to translate!"
        onChangeText={newText => setText(newText)}
        defaultValue={text}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text.split(' ').map((word) => word && pizzaEmoji).join(' ')}
      </Text>
    </View>
  );
}

PizzaTranslator.propTypes = {
   pizzaEmoji: PropTypes.string,
}

export default PizzaTranslator;

我正在记录我的 React Native (EXPO) 应用程序的组件。为此，我尝试安装

react-styleguidist.js

但是，在完成所有安装过程之后，我遇到了与 expo webpack 配置相关的多个错误。

是否建议使用 react-styleguidist 等第三方库来自动生成可视化文档？或者使用 JSDOC 语法对它们进行注释就足够了吗？

为了评论我的组件代码，您有什么建议？您使用的任何库或指南？

【问题讨论】：

标签： javascript reactjs react-native jsdoc

【解决方案1】：

React Native Template本身使用JSDOC语法这样评论

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
...

所以我觉得够了。

【讨论】：