reactjs - 从 react 中的高阶组件调用实例方法

Question

如果我有一个这样的类，其中包含 createDocument 方法:

class Sine extends Component {
  createDocument() {
    console.log('in createDocument');
  }

  render(el, props) {
    return (
        <div className="row">
          <div className="row">
            <h1>Sine Wave</h1>
            <div id="sine" ref="sine"/>
          </div>
        </div>
    );
  }
}

export default ResizeComponent(Sine);

我有一个像这样的高阶组件:

export var ResizeComponent = ComposedComponent  => class extends Component {
  componentDidMount() {
    this.createDocument();  // undefined
  }

  render() {
    return <ComposedComponent {...this.props}/>;
  }
};

如何从高阶组件包装的类中调用实例方法？

Answer 1

如果您想调用实例方法，只需为包装的组件创建一个 ref 回调并在那里访问它。

export var ResizeComponent = ComposedComponent  => class extends Component {
  onMounted(node) {
    node.createDocument();
  }
  render() {
    return <ComposedComponent
              ref={(node) => this.onMounted(node)}
              {...this.props}/>;
  }
};

但是，为了避免使用 refs，您还可以将 prop 传递给包装的 Sine 来决定是否要调用 createDocument() componentDidMount