React：如何从另一个组件调用它自己的组件函数？

Question

我正在尝试实现对 PESDK (PhotoEditorSDK) 的 React 导入的方法。

我有一个 App.js 导入 Header、BodyLeft 和 BodyMiddle 没有关系.

BodyMiddle.js 是一个模板组件，渲染 :

// src/components/BodyMiddle/index.js
import React, { Component } from "react";
import "./BodyMiddle.css";

class BodyMiddle extends Component {
    constructor(props){
        super(props);
    }

    handleClick(e) {
        e.preventDefault();
        // Nothing yet
    }

  render() {
    return (
      <div id="BodyMiddle">
        <div><button id="resetEditor" onClick={(e) => this.handleClick(e)}>Reset Editor</button></div>
        <div class="photo-editor-view"></div>
      </div>
    );
  }
}

export default BodyMiddle;

PhotoEditor.js是调用PESDK的组件:

// src/components/PhotoEditor/index.js
import React from 'react'
import ReactDOM from 'react-dom'

window.React = React
window.ReactDOM = ReactDOM

import "./PhotoEditor.css";
import "photoeditorsdk/css/PhotoEditorSDK.UI.ReactUI.min.css";
import PhotoEditorUI from 'photoeditorsdk/react-ui'

class PhotoEditor extends React.Component {
    constructor(props){
        super(props);
    }

    resetEditor(){
        // Empty the image
        return this.editor.ui.setImage(new Image());
    }

    render() {
      const { ReactComponent } = PhotoEditorUI;

      return (
          <div>
              <ReactComponent
              ref={c => this.editor = c}
              license='licence_removed_for_snippet'
              assets={{
                  baseUrl: './node_modules/photoeditorsdk/assets'
              }}
              editor={{image: this.props.image }}
              style={{
                  width: "100%",
                  height: 576
              }} />
          </div>)
    }
}

export default PhotoEditor;

请注意，照片编辑器视图 div class 通过调用以下代码在 BodyLeft.js 中呈现，效果很好：

ReactDOM.render(<PhotoEditor ref={this.child} image={image} />, container);

容器在哪里（我在其他地方传递图像）：

const container = document.querySelector('.photo-editor-view');

我想要实现的目标

我想将重置按钮保留在 BodyMiddle 中，它是独立的并从 App.js 调用，以便从我的应用程序的任何位置调用方法 resetEditor() 上的 PhotoEditor 组件。

这样我就可以将相互影响的模板文件分开。

我已经做了研究，但我还没有真正找到答案，我知道 React 可能不是那个的库，但有哪些选择？我看到越来越多的 React 直播应用运行很多组件在交互，我很好奇。

感谢您的宝贵时间！最好的问候

Answer 1

您可以在 PhotoEditor 上使用 ref 并将该引用保存在 App 中，并且在 App 中您可以有一个名为 onResetEditor 的方法调用 ref.resetEditor。

现在您可以将 onResetEditor 传递给 BodyMiddle 或任何其他组件。

阅读更多关于 React 中的引用 https://reactjs.org/docs/refs-and-the-dom.html

React：如何从另一个组件调用它自己的组件函数？

React: How to call a component function on it's own render from another component?

javascript

reactjs

photoeditorsdk

我想要实现的目标