React类组件中createRef的current属性提示只读的TypeScript问题

React.createRef的设计目的是绑定DOM元素或类组件实例，它返回的RefObject类型中，current属性被标记为只读，因此无法直接给它赋值字符串这类基本类型值。

方案1：使用类实例属性存储值（推荐） #

不需要借助ref，直接在类中定义实例属性来存储字符串值：

class MyClassComponent extends React.Component {
  myValue: string | undefined;

  someFunction = () => {
    this.myValue = 'value';
  };
}

方案2：手动定义可修改的Ref对象 #

如果一定要用ref结构存储，可以使用React.MutableRefObject类型，它允许修改current属性：

class MyClassComponent extends React.Component {
  myRef: React.MutableRefObject<string | undefined> = { current: undefined };

  someFunction = () => {
    this.myRef.current = 'value';
  };
}

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