我要实现的目标

Question

我正在尝试实现PESDK（PhotoEditorSDK）的React导入的方法。

我有一个 App.js ，它导入了 Header ， BodyLeft 和 BodyMiddle ，两者之间没有任何关系。 / p>

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;

请注意，通过调用以下代码，在BodyLeft.js中呈现了photo-editor-view div类，并且效果很好：

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

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

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

我要实现的目标

我想将Reset Button保留在BodyMiddle中，BodyMiddle是独立于App.js并从App.js中调用的，以便从我应用程序中的任何位置调用方法resetEditor（）上的PhotoEditor组件。

那样，我可以分离出相互干扰的模板文件。

我已经进行了研究，但还没有真正找到答案，我知道React可能不是解决问题的办法，但是有什么选择呢？我很好奇。越来越多的React Live应用程序与许多组件交互运行，这很好奇。

谢谢您的时间！最好的问候

Answer 1

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

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

详细了解React https://reactjs.org/docs/refs-and-the-dom.html

中的引用

React：如何从另一个组件的自身渲染调用一个组件函数？

我要实现的目标

1 个答案: