已解決430363個問題，去搜搜看，總會有你想問的

錯誤：函數組件不能有字符串引用。我們建議改用 useRef()

首頁猿問錯誤：函數組件不能有字符串引用。我...

錯誤：函數組件不能有字符串引用。我們建議改用 useRef()

JavaScript

慕田峪4524236 2022-12-22 14:44:54

我在我的 React 應用程序中使用 ace Editor 并收到上述錯誤。我想將我在我的 React 應用程序中使用的 Ace Editor IDE 的內容放在通過提交按鈕觸發的函數調用中。<AceEditorref='aceEditor'height='100%'width='100%'mode={ideLanguage}theme={ideTheme}fontSize={ideFontSize}showGutter={true}showPrintMargin={false}/>這是按鈕<Buttontype='button'buttonStyle='btn--primary--normal'buttonSize='btn--medium'onClick={SendCode}>SUBMIT</Button>這是功能const SendCode = () => { console.log(this.refs.aceEditor.editor.getValue());};我究竟做錯了什么？？

查看完整描述

1 回答

肥皂起泡泡

TA貢獻1829條經驗獲得超6個贊

字符串引用是設置 DOM 引用的傳統方式。

在最新的 React 版本中，建議對功能組件和類組件使用React.useRef()鉤子。React.createRef()

您可以閱讀更多詳細信息 - https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs

我猜，你可能已經打開了<React.StrictMode>高階組件的嚴格模式。這就是為什么會拋出錯誤/警告的原因。

你應該做什么 -

聲明一個 ref 變量。
const aceEditorRef = useRef();
之后，替換ref='aceEditor'為ref={aceEditorRef}。

<AceEditor

ref={aceEditorRef}

height='100%'

width='100%'

mode={ideLanguage}

theme={ideTheme}

fontSize={ideFontSize}

showGutter={true}

showPrintMargin={false}/>

使用 aceEditorRef.current 獲取 DOM 引用

const SendCode = () => {

console.log(this.aceEditorRef.current.editor.getValue());

};

反對回復 2022-12-22

1 回答
0 關注
110 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

錯誤：函數組件不能有字符串引用。我們建議改用 useRef()

錯誤：函數組件不能有字符串引用。我們建議改用 useRef()

1 回答

添加回答

錯誤：函數組件不能有字符串引用。我們建議改用 useRef()