響應高階組件 - 包裝組件中的包裝組件的調用函數

Question

假設我使用的是正確的模式，我希望能夠從<Wrapper/>以內調用someFunc()-位於<Home/>之內。請看下圖：

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