@alicloud/console-components/demo/demo-breadcrumb/const/index.ts

Alibaba Cloud React Components

import {
  EIssueType,
  EIssueConsequence
} from '../../enum';
import {
  IFixing
} from '../../types';

export const FIXING_PROP_CHILDREN: IFixing = {
  propName: 'children',
  codeOld: `interface BreadcrumbProps {
  children?: any;
}`,
  codeNew: `interface BreadcrumbProps {
  children: ReactElement | ReactElement[];
}`,
  issues: [{
    title: '<code>children</code> 中混入 <code>div</code>',
    code: `<Breadcrumb>
  <div>xxx</div>
  <BreadcrumbItem ... />
</Breadcrumb>`,
    type: EIssueType.RUNTIME_WARNING,
    consequences: [EIssueConsequence.PROP_TYPES],
    error: 'Warning: Failed prop type: Breadcrumb\'s children must be Breadcrumb.Item!'
  }, {
    title: '<code>children</code> 中混入 <code>null</code>',
    code: `<Breadcrumb>
  {stateXx ? <BreadcrumbItem ... /> : null}
  <Breadcrumb ... />
</Breadcrumb>`,
    type: EIssueType.RUNTIME_WARNING,
    consequences: [EIssueConsequence.PROP_TYPES],
    error: 'Warning: Failed prop type: Breadcrumb\'s children must be Breadcrumb.Item!'
  }, {
    title: '<code>children</code> 中混入字符串',
    code: `<Breadcrumb>
  字符串
  <Breadcrumb ... />
</Breadcrumb>`,
    type: EIssueType.RUNTIME_CRASH,
    consequences: [EIssueConsequence.CRASH],
    error: 'Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it\'s defined in, or you might have mixed up default and named imports.'
  }]
};

export const FIXING_PROP_COMPONENT: IFixing = {
  propName: 'component',
  codeOld: `interface BreadcrumbProps {
  component?: string | (() => void);
}`,
  codeNew: `interface BreadcrumbProps {
  component?: string | ComponentType;
}`,
  issues: [{
    title: '<code>component="x"</code>',
    code: `<Breadcrumb component="x">
  ...
</Breadcrumb>`,
    type: EIssueType.RUNTIME_WARNING,
    consequences: [EIssueConsequence.DEBUG_WARNING],
    error: 'Warning: The tag <code>x</code> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.'
  }]
};