question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PropsTable Default values ​​are not supported in TSX

See original GitHub issue

Question

index.tsx

import React from 'react';
import PropTypes from 'prop-types';
import cls from './index.less';

const defaultIcon = "data:image/svg...";

export interface IErrorPageProps {
  message?: string;
  onRetry?: () => {};
  showIcon?: boolean;
  icon?: string;
  showRetry?: boolean;
}

const ErrorPage = (props: IErrorPageProps) => {
  const {
    message = '发生了未知错误',
    showIcon = true,
    icon = defaultIcon,
    onRetry = function empty() {},
    showRetry = true,
  } = props;
  
  const onRetryHandle = () => {
    onRetry();
  };
  
  return (
    <div className={cls['error-page']}>
      {showIcon && <img src={icon} alt="错误Icon" />}
      <span className={cls['error-desc']}>{message}</span>
      {showRetry && (
        <span onClick={onRetryHandle} className={cls['retry-btn']}>
          重新加载
        </span>
      )}
    </div>
  );
};

ErrorPage.propTypes = {
  message: PropTypes.string,
  onRetry: PropTypes.func,
  showIcon: PropTypes.bool,
  icon: PropTypes.string,
  showRetry: PropTypes.bool,
};

ErrorPage.defaultProps = {
  message: '发生了未知错误',
  showIcon: true,
  icon: defaultIcon,
  onRetry: function empty() {},
  showRetry: true,
};

export default ErrorPage;

index.mdx

import { Playground, PropsTable } from 'docz';
import ErrorPage from './';

# ErrorPage Component

错误提示页面

## Basic usage
<Playground>
  <div className="demo-mobile-box">
    <ErrorPage>你好</ErrorPage>
  </div>
</Playground>


## API

<PropsTable of={ErrorPage} />

image

why not default Props or Playground。If remove prop-types , Playground is display, but defaul how to dispaly?

image

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5

github_iconTop GitHub Comments

7reactions
zhaoyao91commented, Dec 21, 2019

Here is a workaround

type Props = {
  /**
   * The color of the button text.
   * @default 'blue'
   */
  color?: string;
};

add @default field in the jsdoc for the prop

0reactions
heynextcommented, Nov 23, 2019

so is there any solution?

Read more comments on GitHub >

github_iconTop Results From Across the Web

PropsTable Default values ​​are not supported in TSX #670
Question index.tsx import React from 'react'; import PropTypes from 'prop-types'; import cls from './index.less'; const defaultIcon ...
Read more >
Default property value in React component using TypeScript
Default props with class component. Using static defaultProps is correct. You should also be using interfaces, not classes, for the props ...
Read more >
ArgsTable - Storybook - JS.ORG
ArgsTable. Storybook Docs automatically generates component args tables for components in supported frameworks. These tables list the arguments (args for short) ...
Read more >
@component-controls/storybook - npm
Specify the component(s), for which to have information displayed. The default, a value of `"."` will indicate to display information for the ...
Read more >
TextArea - React Spectrum Libraries - Adobe
A TextArea's value is empty by default, but an initial, uncontrolled, value can be ... For a full list of supported events, see...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found