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

（编辑：晋中站长网）

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