React Higher Order Component - 从包装组件调用被包装组件中的函数答案

【问题标题】：React Higher Order Component - call function in the wrapped component from the wrapper componentReact Higher Order Component - 从包装组件调用被包装组件中的函数
【发布时间】：2018-02-25 14:44:05
【问题描述】：

假设我使用了正确的模式，我希望能够从<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

【问题讨论】：

标签： javascript reactjs higher-order-components

【解决方案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>
      );
    }
  })
}

【讨论】：