“开关”类型上不存在“已检查”属性

Question

我收到来自TypeScript 的Property 'checked' does not exist on type 'Switch'. 消息，用于this.checked 和this.disabled createRefs。另外，在最后一行，我还收到了来自TS 的Property 'checked' does not exist on type 'Switch 警告。如何解决这些警告？

interface Props {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
}

interface States {
  checked: boolean;
  disabled?: boolean;
}

export default class Switch extends React.PureComponent<Props, States> {
  constructor(props: any) {
    super(props);
    this.checked = React.createRef(); // comment this line out to use as controlled component
    this.disabled = React.createRef(); // comment this line out to use as controlled component
    this.state = {
      checked: false,
      disabled: false,
    };
  }

  render() {
    ...
    <div ref={this.checked}> // TypeScript warns: Property 'checked' does not exist on type 'Switch'

Answer 1

您的问题是您需要在将它们与this 一起使用之前定义这些变量。只需定义它们 private 或 public 或您想要的。它的类型将是 React.createRef() 和 React.RefObject 对象的结果。如果您知道将在哪个节点元素上使用ref，那么您可以在类型中精确它。

例如，您在div 上使用this.checked，因此您可以将其定义为React.RefObject<HTMLDivElement>。如果您还不知道，请使用React.RefObject<unknown>：

export default class Switch extends React.PureComponent<Props, States> {
  private checked: React.RefObject<HTMLDivElement>;
  private disabled: React.RefObject<unknown>;

  constructor(props: any) {
    super(props);
    this.checked = React.createRef(); // comment this line out to use as controlled component
    this.disabled = React.createRef(); // comment this line out to use as controlled component
    this.state = {
      checked: false,
      disabled: false
    };
  }

  render() {
    return <div ref={this.checked} />;
  }
}