错误：函数组件不能有字符串引用。我们建议使用 useRef() 代替

Question

我在我的 React 应用程序中使用 ace Editor 并收到上述错误。我想通过提交按钮触发的函数调用将我在 React 应用程序中使用的 Ace Editor 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()

 钩子，对类组件使用 

React.createRef()

。

您可以阅读更多详细信息 -

https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs

我可以猜测，您可能已经使用

<React.StrictMode>

 高阶组件打开了严格模式。这就是抛出错误/警告的原因。

你应该做什么-

1. 声明一个 ref 变量。

   const aceEditorRef = useRef();

2. 之后，将

   ref='aceEditor'

   替换为

   ref={aceEditorRef}

   。

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

3. 使用 aceEditorRef.current 获取 DOM 引用

   const SendCode = () => {
     console.log(this.aceEditorRef.current.editor.getValue());
   };

Answer 2

如果您已从 TypeScript 恢复，请从代码中删除所有类型引用。