重温react-09(高阶组件的使用方式和注意事项)

admin2024-07-04  15

高阶组件

可以理解为vue的混入吧,但是没有那个方便(个人见解)

挂载的全局App.jsx的代码

import React from 'react';
import LearnFunction05 from './LearnFunction05'; //  这个是高阶函数的用法
export default function boxReact() {
  return (
    <div>
      <LearnFunction05 />
    </div>
  )
}

使用高阶组件的代码

import React from 'react'
// 高阶组件 
import HocTemplate from './hoc/hocTemplate'
function LearnFunction05(props) {
    console.log(props.num);
    return (
        <div>
            <div>
            LearnFunction05
            </div> 
        </div>
    )
}

export default HocTemplate(LearnFunction05)
import React from "react";
const HocTemplate = (WrappedComponent) => {
    return (props)=>{
        console.log(props);
        return (
            <div>
                <h1>这是高阶组件的头部</h1>
                <WrappedComponent {...props}/>
                <h1>这是高阶组件的尾部</h1>
            </div>
        )
    }
}
export default HocTemplate;

props丢失问题

如果在app传参给05组件的话 , 此时是拿不到传递参数,因为这个参数是被高阶组件修饰过的,所以已经传给高阶组件了。

重温react-09(高阶组件的使用方式和注意事项),第1张

可以用上面的方式将参数传给这个传过来的组件,这样的话,这个组件就可以接收到相应的信息。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!