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中，您可以传递道具，就像将参数传递给函数一样。因此，您可以执行<Toolbar editor={this.editorRef} />或<Toolbar editor={this.editorRef.current} />

授予子功能部件访问父功能部件中定义的Ref的权限。 useRef（）

1 个答案: