zoukankan      html  css  js  c++  java
  • React无状态组件与高阶组件

    无状态组件在需要生命周期时,可以通过高阶组件来实现

    如下:

    1.无状态组件作为高阶组件的参数,并在最后通过调用高阶函数  导出 一个高阶组件

    //这是一个无状态组件 TableComponent 
    import React from 'react'
    import { Table } from './table'   // 高阶函数
    const TableComponent = (props) => {
            return (
                <div>
                    
                    {props.dataSource}
                </div>
            )
    }
    export default Table(TableComponent);

    2.写一个高阶组件,里面写任何需要的生命周期

    import React from 'react'
    export const Table = (ComposedComponent) => {
        return class extends React.Component {
          constructor(props) {
              super(props)
          }  
          componentDidMount() {
              console.log('componentDidMount');
          }
          render() {
            return (
                <ComposedComponent {...this.props}/>
            )
          }
        }      
    }

    3.直接在需要的地方引入高阶组件调用即可,跟其他组件引用一样

  • 相关阅读:
    html常用属性手记
    html常用标签手记
    linux安装与命令大全
    14.ref参数
    13.out参数
    10.结构
    9.枚举
    8.常量
    6.使用Convert进行类型转换
    5.C#中的转义符和@符号
  • 原文地址:https://www.cnblogs.com/yangstar90/p/7085273.html
Copyright © 2011-2022 走看看