вызова метод экземпляра из высшего компонента порядка в реакции

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 можно также передать пропеллер к вашему завернутые Sine решить, если вы хотите позвонить createDocument() на componentDidMount

Answer 2

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> 
     ); 
    } 
}