React类组件定义interface后scrollDiv报Property '' does not exist on type ''错误如何解决

你写的代码存在两个核心错误，修改后即可解决属性不存在的报错：

1. 误用了React.Component的泛型参数：React.Component的三个泛型参数依次为组件接收的Props类型、组件内部State类型、快照类型，你把包含类内部自定义属性的ChatTabI全部当做Props类型传入，本身不符合泛型定义规则。
2. 类自定义实例属性未提前声明：scrollDiv是你在组件类内部自己定义的实例属性，不属于Props也不属于State，需要直接在类体中提前声明类型，不能写在Props的接口定义里。

正确的代码写法 #

// 单独定义父组件传入的Props类型，仅存放父组件传递的属性
interface ChatTabProps {
  history: any;
  user: any;
}

// 单独定义组件内部State类型
interface ChatTabState {
  text: string;
  messages: any[];
  loading: boolean;
  channel: null | any;
}

class ChatTab extends React.Component<ChatTabProps, ChatTabState> {
  // 提前声明自定义实例属性scrollDiv的类型
  scrollDiv: React.RefObject<HTMLDivElement>;
  // 如果不确定ref指向的元素类型，也可以暂时写为 scrollDiv: any;

  constructor(props: ChatTabProps) {
    super(props);

    this.state = {
      text: "",
      messages: [],
      loading: false,
      channel: null,
    };

    this.scrollDiv = React.createRef();
  }
  // ... 其余组件逻辑
}

内容的提问来源于stack exchange，提问作者IWI