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

HOC无法做到这一点。但是，如果你想在包装组件中使用HOC中的一个函数，你可以通过道具传递它。

否则，要解决您的情况，请使用继承：

class ResizeComponent extends React.Component{
    componentDidMount() {
        this.createDocument();
    }
};

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

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

Answer 2

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

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

但是，为了避免使用refs，您还可以将道具传递到已包裹的Sine，以决定是否要在createDocument()上致电componentDidMount

从反应中的高阶组件调用实例方法

2 个答案: