授予子功能组件访问父功能组件中定义的Ref。useRef()

Question

我需要访问“编辑器”，它是在我的父组件(Editor.js)中定义的引用。我的子组件(Toolbar.js)有函数imgChangeHandler，它需要编辑器ref。做这件事最好的方法是什么？

Editor.js (父级)：

import React, {useRef, useState} from "react"
const editor = useRef(null);

function Editor() {
  ...
    return (
        <>
            <div className="center">

               <div
                   className="editor"
                   style={editorStyle}
                   ref={editor}
                   contentEditable={true}
                   suppressContentEditableWarning={true}
               >
                   <h1>introText</h1>
                   <p>subText</p>
               </div>
            </div>
        </>
    )
}

export default Editor

Toolbar.js (子级)：

import React, {useState} from "react"


function Toolbar() {
    const dispatch = useDispatch();

    const inputRef = useRef(null);
    const [selectedFile, setSelectedFile] = useState(null);

    const imgChangeHandler = e => {

        e.preventDefault();
        setSelectedFile(e.target.files[0]);

        let reader = new FileReader();
        let dataURI = reader.result;

        const img = React.createElement("img",{src: dataURI});
        editor.current.push(img); // need access to editor ref here

        if(selectedFile) {
            console.log("s");
            reader.readAsDataURL(selectedFile)
        }
    };

   ...
}

export default Toolbar

Answer 1

在React中(几乎)，一切都是通过回调来完成的。Toolbar应该说(在它的接口中)我需要一个onImgAdded回调，这样它才能使它显式，并被认为是最佳实践。(特别是如果您使用TypeScript来表示输入是什么，以及是否需要任何返回类型)

但是，如果您仍然坚持使用ref并传递ref，不管是什么原因；在React中，您可以像将参数传递给函数一样传递prop。所以你可以做<Toolbar editor={this.editorRef} />或者<Toolbar editor={this.editorRef.current} />