响应高阶组件 - 包装组件中的包装组件的调用函数

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