zoukankan      html  css  js  c++  java
  • 每周一篇React: 高阶 hoc_component 使用

      说到高阶组件其实小伙伴你并不陌生,只是名字高大上,没啥东西说白了你自己工作中用到了很多只是没有注意到而已。好,现在我们去了解下。。。。


      话不多说直接上个小栗子: 

    class Parents extends Component {
      constructor(props) {
        super(props);
          this.state = {
             parentsSourse: '我是父组件数据'
          }
      }
      render() {
        <>
          <Children />
          这是父组件,相当于我们的外层组件
        </>  
      }    
    }
    class Children extends Component { render() {
    <> 这是子组件,我们展示组件 </> } }

      那么问题来了,我们假如我们想让父组件包含的组件都具有一个属性值,这个值是 newType: true, 此时我们可以直接向下级  Childlren 传递,那么我们也可以封装下父组件导出个高阶组件,那么这个方法可以这么写:

    const Hoc_component = (HocCompoent) =>  {
       return  class NewComponent extends React.Component{
          constructor(props){
             super(props);
             this.state={}
          }
        
           render() {
                const  props = { newType: true } 
                return <HocCompoent {...this.props}  {...props}/>
           }
       }
    }    
    
    // 此时所有的组件只要使用
    
    Hoc_component(Children);   // 此时的子组件就具有了这个方法包装的 newType属性,我们可以去打印看下。

         好的,现在那你是不是能明白高阶组件的用法,其实就是封装个函数将传入的组件添加上数据,直接导出即可,我们常用的react-redux 中的  connect(Children)  一个道理,封装完将数据导入到组件当中,组件相应的具有数据,以及具有了dispatch方法,就是这么个封装。

       感谢您的支持,希望您能点赞~~~

      

  • 相关阅读:
    浅谈js 构造函数 以及 new 运算符
    zabbix学习(一)——LNMP环境搭建及zabbix安装
    K8s部署使用CFSSL创建证书
    kubernetes环境搭建 -k8s笔记(一)
    windows下python3和python2虚拟环境配置
    QEMU/KVM网络模式(二)——NAT
    KVM安装
    QEMU网络模式(一)——bridge
    百度地图、腾讯地图、高德地图经纬度转换
    DOS入门(2)
  • 原文地址:https://www.cnblogs.com/GongYaLei/p/11419556.html
Copyright © 2011-2022 走看看