reactjs / reactjs/react-docgen

Can not parse function component

オープン
#370 コメント 4 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

needs-more-info
主要言語
TypeScript
スター
3.8k
フォーク
316
平均マージ
5時間 7分
マージ済み PR(30日)
4

説明

I using react-styleguidist.
But fuctional component is can't parse.

my code:

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { sizeEnum } from '../../types/enum';
import styles from './Checkbox.module.scss';

/**
 * Design Guide Checkbox.
 */
function Checkbox(props) {
  const { id, name, value, label, size, checked, disabled, onChange } = props;
  const labelClass = classNames(styles.label, styles[size]);
  const inputClass = classNames(styles.input, styles[size]);

  return (
    <label className={labelClass} htmlFor={id}>
      <input
        type="checkbox"
        id={id}
        className={inputClass}
        name={name}
        value={value}
        checked={checked}
        disabled={disabled}
        onChange={onChange}
      />
      {label || value}
    </label>
  );
}

Checkbox.propTypes = {
  /** id */
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  /** input name */
  name: PropTypes.string.isRequired,
  /** input value */
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
  /** label */
  label: PropTypes.string,
  /** size */
  size: PropTypes.oneOf([sizeEnum.large, sizeEnum.medium]),
  /** checked */
  checked: PropTypes.bool,
  /** disabled */
  disabled: PropTypes.bool,
  /** onChange */
  onChange: PropTypes.func,
};

Checkbox.defaultProps = {
  label: '',
  size: sizeEnum.medium,
  checked: false,
  disabled: false,
  onChange: () => null,
};

export default Checkbox;

display message:

Warning: Cannot parse src/app/components/Checkbox.jsx: RangeError: Maximum call stack size exceeded

class component is parsed well.

react-styleguidist version is 9.1.2

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

react-styleguidist 9.1.2 を使用して、src/app/components/Checkbox.jsx として報告された JSX の例で失敗を再現する。報告には test ファイルも parser ファイルも記載されていない。完了の条件は、クラスコンポーネントが引き続き正しく解析される一方で、関数コンポーネントが RangeError なしで解析できることである。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, react
領域
documentation, tooling
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。