Предоставление дочернему функциональному компоненту доступа к Ref, определенному в родительском функциональном компоненте. useRef ()

Question

Мне нужен доступ к «редактору», который является ссылкой, определенной в моем родительском компоненте (Редактор. js). Мой дочерний компонент (Панель инструментов. js) имеет функцию imgChangeHandler, для которой требуется редактор ref. Каков наилучший способ сделать это?

Редактор. 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

Панель инструментов. 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 для express того, что является входными данными, и если ожидаются какие-либо возвращаемые типы)

Но если вы все еще настаиваете на использовании ref и передаче ref вниз по какой бы то ни было причине; в React вы можете передавать реквизиты так же, как передаете аргументы в функцию. Так что вы можете сделать <Toolbar editor={this.editorRef} /> или <Toolbar editor={this.editorRef.current} />