React Higher Orderコンポーネント - ラッパーコンポーネントからラップされたコンポーネントの呼び出し関数

Question

正しいパターンを使用していると仮定して、の内部のsomeFunc()を<Wrapper/>から呼び出すことができます。以下を参照してください：ソリューションで更新

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')) 

：https://codepen.io/oldgithub/pen/qPOZEjは

Answer 1

あなたはそのためrefを使用することができます。

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