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

Alibaba Cloud React Components

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

export const FIXING_PROP_COMPONENT: IFixing = {
  propName: 'component',
  codeOld: `interface ButtonProps {
  component?: string | (() => void);
}`,
  codeNew: `interface ButtonProps {
  component?: string | ComponentType;
}`,
  issues: [{
    title: '随便什么字符串',
    code: `<Button component="x">
  ...
</Button>`,
    type: EIssueType.RUNTIME_WARNING,
    consequences: [EIssueConsequence.DEBUG_WARNING],
    error: [
      'Warning: Failed prop type: Invalid prop `component` of value `x` supplied to `Config(Button)`, expected one of ["button","a","div","span"]',
      'Warning: The tag `x` is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.'
    ]
  }, {
    title: '一个简单的 FunctionComponent',
    code: `<Button component={SomeFunctionComponent}>
...
</Button>`,
    type: EIssueType.RUNTIME_WARNING,
    consequences: [EIssueConsequence.DEBUG_WARNING],
    error: [
      'Warning: Failed prop type: Invalid prop `component` of value `function ComponentFn(_a) {...}` supplied to `Config(Button)`, expected one of ["button","a","div","span"].',
      'Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?'
    ]
  }, {
    title: '一个简单的 Class Component',
    code: `<Button component={SomeClassComponent}>
...
</Button>`,
    type: EIssueType.RUNTIME_WARNING,
    consequences: [EIssueConsequence.DEBUG_WARNING],
    error: 'Warning: Failed prop type: Invalid prop `component` of value `function ComponentClz() {\nreturn _super !== null && _super.apply(this, arguments) || this;}` supplied to `Config(Button)`, expected one of ["button","a","div","span"].'
  }, {
    title: 'true / false 是合法的 ReactNode，但绝对不可用',
    code: `<Button component={true/false}>
...
</Button>`,
    type: EIssueType.RUNTIME_CRASH,
    consequences: [EIssueConsequence.DEBUG_WARNING, EIssueConsequence.CRASH],
    error: [
      'Warning: Failed prop type: Invalid prop `component` of value `true` supplied to `Config(Button)`, expected one of ["button","a","div","span"].',
      'Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: boolean.'
    ]
  }]
};