无法在我的主index.js文件中获取coderef.current，并且它带来了错误

Question

所以我有 2 个，我应该将 codeRef.current 从 EditorContainer.js 获取到 index.js，但我没有得到它我能做什么

这里是index.js

import { useNavigate, useParams } from "react-router-dom";
import "./playground.scss";
import codelogo from "./vlogo.png";
import { PlaygroundContext } from "../../Providers/PlaygroundProvider";
import { Navigate } from "react-router-dom";
import { EditorContainer } from "./EditorContainer";
import { useContext } from "react";

export const PlaygroundScreen = () =>{
   
    const {saveCode} = useContext(PlaygroundContext);

    const Navigate = useNavigate();

    const homepage = () => {
        Navigate(`/`);
    }

    const onSaveCode = () => {
        saveCode(fileId, id, codeRef.current)
        alert("Code Saved");
    }

   const params = useParams();
   console.log(params)
    const {fileId, id   } = params;  
    return(
        <div className="main-container">
            <div className="title-container">
                <div className="brand-container">
                <img src={ codelogo }></img>
                </div>
                <div className="button-container">
                <span class="material-symbols-outlined" onClick={onSaveCode}>save</span>
                <span class="material-symbols-outlined" onClick={homepage}>arrow_back</span>
                <div className="purple-stuff"><br></br></div>
                </div>
            </div>

            <div className="code-container">
                <EditorContainer />
            </div>
        </div>
    );
}

这里有 editorcontainer.js

import { useRef, useState } from "react";
import "./EditorContainer.scss"
import Editor from "@monaco-editor/react";
import { PlaygroundContext } from "../../Providers/PlaygroundProvider";

export const EditorContainer = (fileId, id) =>{

    const [code, setCode] = useState('');
    const codeRef = useRef();

    const editorOptions={
        theme: 'vs-dark',
        wordWrap: 'on' 
        }

    const onChangeCode = (newCode) =>{
        console.log(newCode);
        // setCode(newCode);
        codeRef.current = newCode;
    }

    return(
        <div className="root-editor-container">
                {/* <h1>YAHOOO</h1> */}
                <Editor 
                height={"100%"}
                language={"javascript"}
                options={editorOptions}
                theme={'vs-dark'}  
                onChange={onChangeCode}
                />
        </div>
    )
}

错误也是 src\Screens\PlaygroundScreen\index.js 第 20:30 行：“codeRef”未定义

我尝试通过导出函数中的 () 发送它，但它带来了另一个错误，即无法读取 .current

Answer 1

您的代码中有几个错误。首先，如果您需要在

codeRef

上使用

PlaygroundScreen

，您应该在那里声明它，然后您需要将其作为 prop 传递给

EditorContainer

。

其次，您的

EditorContainer

组件接收的 props 错误，因为它应该是一个对象或 props，并且使用您在父组件上传递的值进行了解构。

第三，你使用的参考文献是错误的。这些引用用于避免触发组件生命周期，因此，如果您需要更新引用，您应该使用

Editor

属性将其作为属性传递给

ref

。之后，您可以使用

ref.current.value

来访问里面的值（也许它可能是 value 之外的另一个键，您可以通过 console.log 来确定），而不必使用

onChangeCode

函数。会是这样的：

import { useNavigate, useParams } from "react-router-dom";
import "./playground.scss";
import codelogo from "./vlogo.png";
import { PlaygroundContext } from "../../Providers/PlaygroundProvider";
import { Navigate } from "react-router-dom";
import { EditorContainer } from "./EditorContainer";
import { useContext } from "react";

export const PlaygroundScreen = () =>{
    // here you declare the ref
    const codeRef = useRef();
    const {saveCode} = useContext(PlaygroundContext);

    const Navigate = useNavigate();

    const homepage = () => {
        Navigate(`/`);
    }

    const onSaveCode = () => {
        // now here you can use the codeRef.current
        saveCode(fileId, id, codeRef.current.value)
        alert("Code Saved");
    }

   const params = useParams();
   console.log(params)
    const {fileId, id   } = params;  
    return(
        <div className="main-container">
            <div className="title-container">
                <div className="brand-container">
                <img src={ codelogo }></img>
                </div>
                <div className="button-container">
                <span class="material-symbols-outlined" onClick={onSaveCode}>save</span>
                <span class="material-symbols-outlined" onClick={homepage}>arrow_back</span>
                <div className="purple-stuff"><br></br></div>
                </div>
            </div>

            <div className="code-container">
                <EditorContainer codeRef={codeRef} />
            </div>
        </div>
    );
}

EditorContainer 将类似于：

import { useRef, useState } from "react";
import "./EditorContainer.scss"
import Editor from "@monaco-editor/react";
import { PlaygroundContext } from "../../Providers/PlaygroundProvider";


/* As a plus, keep the statics variable declaration of your component to avoid the recreation on every re-rendering or having to memoize it. */
    const editorOptions={
        theme: 'vs-dark',
        wordWrap: 'on' 
        }

/* here was receiving some data that wasn't passed through props so I deleted it */
export const EditorContainer = ({codeRef}) =>{

    return(
        <div className="root-editor-container">
                {/* <h1>YAHOOO</h1> */}
                <Editor 
                ref={codeRef}
                height={"100%"}
                language={"javascript"}
                options={editorOptions}
                theme={'vs-dark'}  
                />
        </div>
    )
}

希望这有帮助！