在书写上面代码时，ts会给出错误提示 Cannot assign to 'current' because it is a read-only property. ，因为 current 为只读属性，故而不能赋值。

那么怎么将 current 属性转为 动态可变 的呢？

其实在 useRef 的类型定义中已经给出了答案

function useRef<T>(initialValue: T): MutableRefObject<T>;
    // convenience overload for refs given as a ref prop as they typically start with a null value
     * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
     * (`initialValue`). The returned object will persist for the full lifetime of the component.
     * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
     * value around similar to how you’d use instance fields in classes.
     * Usage note: if you need the result of useRef to be directly mutable, include `| null` in the type
     * of the generic argument.
     * @version 16.8.0
     * @see https://reactjs.org/docs/hooks-reference.html#useref
其中注意下面这句话
 
 
Usage note: if you need the result of useRef to be directly mutable, include | null in the type of the generic argument.
 
如果需要直接修改useRef的结果，则在泛型参数的类型中包含 | null 就可以了
 
let confirmModalRef = useRef<IModalReturn | null>(null);
这样就变为动态可变的，不会再给出报错提示
 
useRef 在类型定义中具有多个重载声明，最初的代码走的便是下面的声明
 
function useRef<T>(initialValue: T|null): RefObject<T>;
    // convenience overload for potentially undefined initialValue / call with 0 arguments
    // has a default to stop it from defaulting to {} instead
     * `useRef` returns a mutable ref object whose `.current` property is initialized to the passed argument
     * (`initialValue`). The returned object will persist for the full lifetime of the component.
     * Note that `useRef()` is useful for more than the `ref` attribute. It’s handy for keeping any mutable
     * value around similar to how you’d use instance fields in classes.
     * @version 16.8.0
     * @see https://reactjs.org/docs/hooks-reference.html#useref
                    TypeScript useRef 使用问题interface IModalReturn {  destroy: () =&gt; void;  update: (newConfig: ModalFuncProps) =&gt; void;}let confirmModalRef = useRef&lt;IModalReturn&gt;(null);confirmModalRef...
yarn add @rjsf/core rjsf-native
# This package also depends on `@react-native-community/slider`
yarn add @react-native-community/slider
 import ReactNativeForm from 'rjsf-native' ;
const App = ( ) => {
  const form = useRef ( null ) ;
  return (
    < ReactNativeForm xss=removed xss=removed xss=removed> {
        console . log ( e ) ;
        Alert . alert ( 'Please ch
				
ts-react-todoList
用react + ts完成简单的todoList
 import React , { useEffect , useRef , useState } from "react" ;
import "./App.css" ;
import produce from "immer" ;
interface TodoList {
  id: string ;
  content: string ;
function App ( ) {
  const inputRef = useRef < HTMLInputElement> ( null ) ;
  const [ todoList , setTodoList ] = useState < TodoList> ( [ ] ) ;
  const deleteTodoItem = ( id : s
				
useReference
useReference允许您将对象打包到ref并透明地访问它。 返回的对象是稳定的，但其所有属性将始终具有最新值。 这是并发模式安全的。
 import { useReference } from '@pago/use-reference' ;
const api = useReference ( {
    onSubmit ,
    onError ,
    onChange ,
    getData
} ) ;
const [ data , setData ] = useState ( ) ;
useEffect ( function loadAdditionalData ( ) {
    api . getData ( ) . then ( setData ) ;
} , [ api , url ] ) ;
useEffect ( fu
由哈佛国际发展中心的增长实验室提供
使用Mapbox可视化城市空间
该软件包是哈佛增长实验室软件包，数字产品和交互式数据可视化产品组合的一部分。 要浏览我们的全部产品组合，请访问位于The Viz Hub。 要了解有关我们研究的更多信息，请访问主页。
npm install --save react-city-space-mapbox
import React , { useRef } from 'react'
import OptionsBar from './OptionsBar' // child components can use the map context to trigger events
import CitySpaceMap from 'react-city-space-mapbox'
const App =
				
原文链接:
                  React Typescript 报错 Cannot assign to 'current' because it is a read-only property.
import React from "react" ;
import ReactDOM from "react-dom" ;
import { Editor , useFrame } from "react-three-editor" ;
const Box = ( ) => {
  const ref = React . useRef ( null ) ;
  useFrame ( ( { time } ) => {
    const mesh = ref . current ;
    if ( ! mesh ) return ;
    const t = Math . PI * ( time / 1000 ) ;
    mesh . position . set ( 0 , Math 
				
在 TypeScript 中，Ref 是一个泛型接口，它允许我们在组件中访问和修改 DOM 元素的引用。通过使用 Ref，我们可以将元素引用传递给另一个组件或函数，并在组件或函数中对其进行修改。
下面是一个使用 Ref 的例子：
```typescript
import React, { useRef } from 'react';
function MyComponent() {
  const inputEl = useRef<HTMLInputElement>(null);
  const handleClick = () => {
    if (inputEl.current) {
      inputEl.current.focus();
  return (
      <input type="text" ref={inputEl} />
      <button onClick={handleClick}>Focus the input</button>
在上面的例子中，我们使用 useRef 创建了一个名为 inputEl 的 Ref 对象，并将其传递给 input 元素的 ref 属性。我们还使用了泛型来指定 Ref 对象的类型为 HTMLInputElement，这样我们就可以在组件中访问 input 元素的所有属性和方法。
在 handleClick 函数中，我们使用 inputEl.current 来获取 input 元素的引用，并调用其 focus() 方法，将焦点设置到输入框中。
需要注意的是，Ref 对象的 current 属性可能为 null。因此，在使用 Ref 对象时，我们应该先检查 current 属性是否为 null，以避免出现运行时错误。