Error: Function components cannot have string refs. We recommend using useRef() instead

Question

我在我的 React 应用程序中使用 ace 编辑器，但出现上述错误。我想将我在我的 React 应用程序中使用的 Ace 编辑器 IDE 的内容放在通过提交按钮触发的函数调用中。

<AceEditor
ref='aceEditor'
height='100%'
width='100%'
mode={ideLanguage}
theme={ideTheme}
fontSize={ideFontSize}
showGutter={true}
showPrintMargin={false}/>

这是按钮

<Button
type='button'
buttonStyle='btn--primary--normal'
buttonSize='btn--medium'
onClick={SendCode}
>SUBMIT</Button>

这是函数

const SendCode = () => {
  console.log(this.refs.aceEditor.editor.getValue());
};

我做错了什么？？

Answer 1

字符串引用是设置 DOM 引用的传统方式。

对于最新的 React 版本，建议对功能组件使用 React.useRef() 钩子，对 class 组件使用 React.createRef()。

您可以在 - 阅读更多详细信息 https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs

而且我可以猜到，您可能已经使用 <React.StrictMode> higher-order 组件打开了严格模式。这就是为什么会抛出 error/warning。

你应该做什么 -

声明一个 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());
};

Error: Function components cannot have string refs. We recommend using useRef() instead

Error: Function components cannot have string refs. We recommend using useRef() instead

javascript

web-deployment

ace-editor

reactjs