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

Question

I'm trying to implement methods to the React import of PESDK (PhotoEditorSDK).

I have an App.js that imports Header, BodyLeft and BodyMiddle without relation between them.

BodyMiddle.js is a template component that renders :

// 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 is the component that calls the 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;

Note that the photo-editor-view div class is rendered in BodyLeft.js, by calling the following code and it works well:

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

Where container is (and I pass an image somewhere else) :

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

What I'm trying to achieve

I would like to keep the reset Button inside BodyMiddle, which is independant and called from App.js, in order to call the PhotoEditor component on the method resetEditor() from anywhere in my app.

That way I could have separated template files that interract with each other.

I've done research and I did not really find an answer yet, I know that React might not be the lib for that, but what are the options ? I see more and more React live apps running with a lot of components interacting, I'm curious.

Thank you for your time ! Best regards

Answer 1

You can use ref on PhotoEditor and save that ref in App, and in the App you can have a method called onResetEditor which calls the ref.resetEditor.

Now you can pass onResetEditor to BodyMiddle or any other component.

Read more about refs in React https://reactjs.org/docs/refs-and-the-dom.html