React Higher Order Component - appel de la fonction dans le composant enveloppé à partir du composant wrapper

Question

En supposant que j'utilise le bon motif, j'aimerais pouvoir appeler someFunc() - qui se trouve à <Home/> - à partir de <Wrapper/>. Voir ci-dessous:

var Home = React.createClass({ 
    someFunc() { 
    console.log('How can I call this from <Wrapper/>?') 
    }, 
    render() { 
    return <h1>Hello World</h1> 
    } 
}) 

var Wrapper = (Home) => { 
    return React.createClass({ 
    render() { 
     return <Home {...this.props}/> 
    } 
    }) 
} 

var HomeWrapped = Wrapper(Home) 

ReactDOM.render(<HomeWrapped/>, document.getElementById('root')) 

mis à jour avec une solution: https://codepen.io/oldgithub/pen/qPOZEj

Answer 1

Vous pouvez utiliser ref pour que:

var Wrapper = (Home) => { 
    return React.createClass({ 
    render() { 
     return (
      <div> 
       <button onClick={() => {this.home.someFunc()}} /> 
       <Home 
        {...this.props} 
        ref={(c) => this.home = c;} 
       /> 
      </div> 
    ); 
    } 
    }) 
}