React 高阶组件(附加自己的Demo)

高阶组件

1.函数可以作为参数被传递

  setTimeout(() => {

        console.log(1)

    }, 1000 );


2.函数可以作为返回值输出

function demo(x){

        return  function(){

            return x;

        }

    }

//高阶函数的应用

//时间函数

setTimeout(function(){

    console.info("Hello World");

},1000)

let i=0;

setInterval(function(){

    console.info("Hello World");

})

//ajax

$.get("/api/getTime",function(){

    console.info("获取成功");

})

//数组

some()、every()、filter()、map()和forEach();

通过这个图我们可以看出只有图片是不一样的, 其他的都是相同,
我们写一个公共组件A , 然后把他封装成一个方法(加参数),导入其他组件调用这个方法,传输图片参数,来实现

import React, { Component } from 'react'

function A(WrappedComponent){
  return  class A extends Component {
    render() {
      return (
        <div className="a_container">
            <div className="header">商品展示
              <div className="close">x</div>
            </div>
            <div>
                <WrappedComponent/>
            </div>
          
        </div>
      )
    }
  }
}

export default A;

第一个图片

import React, { Component } from 'react'
import A from './../components/A';
class B extends Component {
  render() {
    return (
      <div >
         <img style={{width:'179px',height:'298px'}} src={require('./../images/u716.png')} alt=""/>
      </div>
    )
  }
}
export default A(B);

第二个图片

import React, { Component } from 'react'
import A from './../components/A';
class C extends Component {
  render() {
    return (
      <div >
          <img style={{width:'179px',height:'298px'}} src={require('./../images/person.png')} alt=""/>
      </div>
    )
  }
}
export default A(C);

第三个图片

import React, { Component } from 'react'
import A from './../components/A';
class D extends Component {
  render() {
    return (
      <div >
         <img style={{width:'179px',height:'298px'}} src={require('./../images/u7023.png')} alt=""/>
      </div>
    )
  }
}
export default A(D);

这就是高阶组件,是不是贼简单,看懂的给我点个赞

React 高阶组件(附加自己的Demo)

猜你喜欢