Ошибка: функциональные компоненты не могут иметь строковые ссылки. Вместо этого мы рекомендуем использовать useRef ()

Question

Я использую ace Editor в своем приложении для реагирования и получаю указанную выше ошибку. Я хочу поместить содержимое IDE Ace Editor, которое я использую в своем приложении для реагирования, из вызова функции, который запускается с помощью кнопки отправки.

<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

String refs - это устаревший способ установки ссылки на DOM.

В последней версии React рекомендуется использовать React.useRef() hook для функциональных компонентов и 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}/>

Используйте aceEditorRef.current, чтобы получить ссылку на DOM

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