0

我需要访问“编辑器”，它是在我的父组件（Editor.js）中定义的引用。我的子组件（Toolbar.js）具有需要编辑器参考的功能 imgChangeHandler。做这个的最好方式是什么 ？

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
4

1 回答 1

0

在 React 中（几乎）一切都是使用回调完成的。Toolbar应该说（在它的界面中）我需要有一个onImgAdded回调，所以它使它明确并且被认为是最佳实践。（特别是如果您使用 TypeScript 来表达输入是什么以及是否有任何预期的返回类型）

但是，如果您仍然坚持使用 ref 并出于任何原因将 ref 向下传递；在 React 中，你可以像传递参数给函数一样传递 props。所以你可以做<Toolbar editor={this.editorRef} />或<Toolbar editor={this.editorRef.current} />

于 2020-03-26T03:06:59.587 回答