欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決React報(bào)錯(cuò)Cannot assign to 'current' because it is a read-only property

 更新時(shí)間：2022年12月02日 14:48:34   作者：Borislav Hadzhiev  
這篇文章主要為大家介紹了React報(bào)錯(cuò)Cannot assign to 'current' because it is a read-only property的解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

總覽

當(dāng)我們用一個(gè)null值初始化一個(gè)ref，但在其類型中不包括null時(shí)，就會(huì)發(fā)生"Cannot assign to 'current' because it is a read-only property"錯(cuò)誤。為了解決該錯(cuò)誤，請(qǐng)?jiān)?code>ref的類型中包含null。比如說，const ref = useRef<string | null>(null) 。

這里有個(gè)例子來展示錯(cuò)誤是如何發(fā)生的。

// App.tsx
import {useEffect, useRef} from 'react';
const App = () => {
  const ref = useRef<string>(null);
  useEffect(() => {
    // ?? Error: Cannot assign to 'current' because it is a read-only property.ts(2540)
    ref.current = 'hello';
  }, []);
  return (
    <div>
      <h2>hello world</h2>
    </div>
  );
};
export default App;

上面例子的問題在于，當(dāng)我們將null作為初始值傳遞到useRef鉤子中時(shí)，并且我們傳遞給鉤子的泛型中沒有包括null類型，我們創(chuàng)建了一個(gè)不可變的ref對(duì)象。

正確的泛型

為了解決該錯(cuò)誤，我們必須在傳遞給鉤子的泛型中包括null類型。

// App.tsx
import {useEffect, useRef} from 'react';
const App = () => {
  // ??? include null in the ref's type
  const ref = useRef<string | null>(null);
  useEffect(() => {
    ref.current = 'hello';
  }, []);
  return (
    <div>
      <h2>hello world</h2>
    </div>
  );
};
export default App;

在ref的類型中，我們使用聯(lián)合類型來包括null類型，這使它成為可變ref對(duì)象。

現(xiàn)在這個(gè)例子中ref的類型是字符串或null，它的current屬性可以賦值為這兩種類型中的任意一種的值。

DOM元素

如果你的引用指向一個(gè)DOM元素，情況也是一樣的。如果你需要改變ref的current屬性的值，你必須將鉤子的類型定為 const ref = useRef<HTMLElement | null>(null)。

注意，如果你不直接賦值給它的current屬性，你不必在 ref 的類型中包含 null。

// App.tsx
import {useEffect, useRef} from 'react';
const App = () => {
  const ref = useRef<HTMLInputElement>(null);
  useEffect(() => {
    ref.current?.focus();
  }, []);
  return (
    <div>
      <input ref={ref} type="text" defaultValue="" />
    </div>
  );
};
export default App;

上述例子中的ref是用來聚焦input元素的。因?yàn)闆]有對(duì)其.current屬性進(jìn)行賦值，所以沒有必要在其類型中包含null。

原文鏈接：bobbyhadz.com/blog/react-…

以上就是解決React報(bào)錯(cuò)Cannot assign to 'current' because it is a read-only property的詳細(xì)內(nèi)容，更多關(guān)于React 報(bào)錯(cuò)assign current的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論