【React深入】从Mixin到HOC再到Hook

假如原组件有很是多的静态属性，这个进程长短常疾苦的，并且你必要去相识必要加强的全部组件的静态属性是什么，我们可以行使hoist-non-react-statics来辅佐我们办理这个题目，它可以自动帮我们拷贝全部非React的静态要领，行使方法如下：

import hoistNonReactStatic from 'hoist-non-react-statics';  
function proxyHOC(WrappedComponent) {  
  class HOCComponent extends Component {  
    render() {  
      return <WrappedComponent {...this.props} />;  
    }  
  }  
  hoistNonReactStatic(HOCComponent,WrappedComponent);  
  return HOCComponent;  
} 

申饬—转达refs

行使高阶组件后，获取到的ref现实上是最外层的容器组件，而非原组件，可是许多环境下我们必要用到原组件的ref。

高阶组件并不能像透传props那样将refs透传，我们可以用一个回调函数来完成ref的转达：

function hoc(WrappedComponent) {  
  return class extends Component {  
    getWrappedRef = () => this.wrappedRef;  
    render() {  
      return <WrappedComponent ref={ref => { this.wrappedRef = ref }} {...this.props} />;  
    }  
  }  
}  
@hoc  
class Input extends Component {  
  render() { return <input></input> }  
}  
class App extends Component {  
  render() {  
    return (  
      <Input ref={ref => { this.inpitRef = ref.getWrappedRef() }} ></Input>  
    );  
  }  
} 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!