Javascript 错误:函数组件不能有字符串引用。我们建议改为使用useRef()

Javascript 错误:函数组件不能有字符串引用。我们建议改为使用useRef(),javascript,reactjs,web-deployment,ace-editor,Javascript,Reactjs,Web Deployment,Ace Editor,我在我的react应用程序中使用ace编辑器,并收到上述错误。我想把我在react应用程序中使用的Ace编辑器IDE的内容放在通过提交按钮触发的函数调用中 <AceEditor ref='aceEditor' height='100%' width='100%' mode={ideLanguage} theme={ideTheme} fontSize={ideFontSize} showGutter={true} showPrintMargin={false}/> 我做错了什么??

我在我的react应用程序中使用ace编辑器,并收到上述错误。我想把我在react应用程序中使用的Ace编辑器IDE的内容放在通过提交按钮触发的函数调用中

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

我做错了什么???

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

对于最新的React版本,建议对功能组件使用
React.useRef()
hook,对类组件使用
React.createRef()

您可以在以下网址阅读更多详细信息:-

我可以猜,您可能已经使用高阶组件打开了严格模式。这就是抛出错误/警告的原因

你该怎么办-

  • 声明一个ref变量

    const aceEditorRef=useRef()

  • 之后,将
    ref='aceEditor'
    替换为
    ref={aceEditorRef}

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

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

  • 字符串引用是设置DOM引用的传统方法

    对于最新的React版本,建议对功能组件使用
    React.useRef()
    hook,对类组件使用
    React.createRef()

    您可以在以下网址阅读更多详细信息:-

    我可以猜,您可能已经使用高阶组件打开了严格模式。这就是抛出错误/警告的原因

    你该怎么办-

  • 声明一个ref变量

    const aceEditorRef=useRef()

  • 之后,将
    ref='aceEditor'
    替换为
    ref={aceEditorRef}

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

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

  • 您是否介意从定义ref/
    sendCode
    函数并呈现按钮的位置共享代码?最好是一段代码。您介意在定义ref/
    sendCode
    函数并呈现按钮的地方共享代码吗?对于我来说,一段代码是比较新的。你能用一种简单的方式解释一下我可以对我的代码做些什么改变来达到预期的结果吗。提前感谢ECL是一个ref变量<代码>常量aceEditorRef=useRef()之后,将
    ref='aceditor'
    替换为
    ref={aceEditorRef}
    。使用
    aceEditorRef.current
    获取DOM引用。我是一个比较新的反应者。你能用一种简单的方式解释一下我可以对我的代码做些什么改变来达到预期的结果吗。提前感谢ECL是一个ref变量<代码>常量aceEditorRef=useRef()之后,将
    ref='aceditor'
    替换为
    ref={aceEditorRef}
    。使用
    aceEditorRef.current
    获取DOM引用。
    const SendCode = () => {
      console.log(this.aceEditorRef.current.editor.getValue());
    };