首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React如何在HOC中获得封装组件的高度?

React中的高阶组件(Higher-Order Component,HOC)是一种用于重用组件逻辑的高级技术。在HOC中获得封装组件的高度可以通过以下步骤实现:

  1. 创建一个高阶组件函数,接受一个被封装组件作为参数。
  2. 在高阶组件函数中,使用React.createRef()创建一个ref对象。
  3. 将这个ref对象作为参数传递给被封装组件,并将其命名为wrappedComponentRef(或其他合适的名称)。
  4. 在高阶组件函数中,使用React.forwardRef()将ref对象传递给被封装组件。
  5. 在被封装组件中,使用ref属性将ref对象绑定到组件的根元素上。
  6. 在高阶组件中,通过访问wrappedComponentRef.current.offsetHeight来获取封装组件的高度。

下面是一个示例代码:

代码语言:txt
复制
import React, { Component } from 'react';

function withHeight(WrappedComponent) {
  class WithHeight extends Component {
    constructor(props) {
      super(props);
      this.wrappedComponentRef = React.createRef();
    }

    componentDidMount() {
      const height = this.wrappedComponentRef.current.offsetHeight;
      console.log('封装组件的高度:', height);
    }

    render() {
      return <WrappedComponent ref={this.wrappedComponentRef} {...this.props} />;
    }
  }

  return React.forwardRef((props, ref) => {
    return <WithHeight {...props} wrappedComponentRef={ref} />;
  });
}

// 使用高阶组件封装组件
class MyComponent extends Component {
  render() {
    return <div>这是一个被封装的组件</div>;
  }
}

const WrappedComponentWithHeight = withHeight(MyComponent);

// 在其他地方使用封装后的组件
function App() {
  return <WrappedComponentWithHeight />;
}

在上述示例中,withHeight函数是一个高阶组件,它接受一个被封装组件作为参数,并返回一个新的组件WithHeight。在WithHeight组件中,通过React.createRef()创建了一个ref对象wrappedComponentRef,并将其传递给被封装组件。在componentDidMount生命周期方法中,通过this.wrappedComponentRef.current.offsetHeight获取封装组件的高度。

最后,通过React.forwardRef()将ref对象传递给WithHeight组件,并将其返回作为高阶组件的结果。在使用封装后的组件WrappedComponentWithHeight时,可以直接访问被封装组件的高度。

这种方法可以用于任何React组件,并且不依赖于特定的云计算品牌商。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React 折腾记 - (9) 基于Antd+react-router-breadcrumbs-hoc封装一个小巧面包屑组件

前言 没有什么技术难度,只是比官方文档多了一丢丢判断和改造; 用了react-router-breadcrumbs-hoc,约定式和配置式路由路由皆可用, 只要传入符合规格数据格式即可 ----...基础环境 React 16.4/UmiJS 2.2/Antd 3.x/ react-router-breadcrumbs-hoc 2.x: API简洁易懂 ---- 效果图 非antd风格 ?...---- 源码及实现 暴露props: data: 面包屑映射关系,数组(react-router-breadcrumbs-hoc要求那种) 比如 : const routes = [{ path...: '/', breadcrumb: '首页' }]; 若是不传递情况下,高阶组件(react-router-breadcrumbs-hoc)会自动获取路径名字为面包屑名字 Breakcrumbs...,会抛出异常说您返回是函数而非React.child, 解决就是我代码那样先缓存成组件,直接返回一个组件 有不对之处请留言,会及时修正,谢谢阅读..

2.8K10

何在 React 组件优雅实现依赖注入

一般这个概念在 Java 中提比较多,但是在前端领域,似乎很少会提到这个概念,其实用好这个思想无论在前后端一样可以帮助我们组件解耦,本文将介绍一下依赖注入在 React 应用。...React 依赖注入 下面几个常见代码,其实都应用了依赖注入思想,我们来看几个例子: 使用 props 允许依赖注入 function welcome(props) { return <h1...因为 InversifyJS 默认使用构造函数注入,但是 React 不允许开发者扩展组件构造函数。...React 思想,因为对象是作为属性传递,而不是在组件内部实例化。...最后 React 生态系统许多流行库都在使用依赖注入,例如 React Router 和 Redux。

5.4K41

React-代码复用(mixin.hoc.render props) 前言例子MixinHOCRender Props总结参考

前言 最近在学习React封装,虽然日常开发也有用到HOC或者Render Props,但从继承到组合,静态构建到动态渲染,都是似懂非懂,索性花时间系统性整理,如有错误,请轻喷~~ 例子 以下是...组件React 是主要代码复用单元,但如何共享状态或一个组件行为封装到其他需要相同状态组件并不是很明了。...现在问题是:我们如何在另一个组件重用行为?换句话说,若另一组件需要知道鼠标位置,我们能否封装这一行为以让能够容易在组件间共享?...拥抱ES6,ES6class不支持Mixin HOC HOC概念 高阶组件HOC)是react高级技术,用来重用组件逻辑。但高阶组件本身并不是React API。...为什么React推崇HOC和组合方式,我理解是React希望组件是按照最小可用思想来进行封装,理想说,就是一个组件只做一件事情,且把它做好,DRY。在OOP原则,这叫单一职责原则。

1.6K30

精读《React 高阶组件

本期精读文章是:React Higher Order Components in depth 1 引言 高阶组件( higher-order component ,HOC )是 React 复用组件逻辑一种进阶技巧...但在实际开发,前端无法逃离 DOM ,而逻辑与 DOM 相关性主要呈现 3 种关联形式: 与 DOM 相关,建议使用父组件,类似于原生 HTML 编写 与 DOM 不相关,校验、权限、请求发送、数据转换这类...最好是能封装成木偶组件(Dumb Component)。HOC 适合做 DOM 不相关又是多个组件共性操作。 Form ,validator 校验操作就是纯数据操作,放到了 HOC 。...具体实践 HOC 在真实场景下运行非常多,之前笔者在 基于Decorator组件扩展实践 一文也提过使用高阶组件将更细粒度组件组合成 Selector 与 Search。...当然,不可过度抽象是我们始终要秉持原则。希望读者通过本次阅读与讨论,能结合自己具体业务开发场景,获得一些启发。

47930

精读 React 高阶组件

1 引言 高阶组件( higher-order component ,HOC )是 React 复用组件逻辑一种进阶技巧。...它本身并不是 React API,而是一种 React 组件设计理念,众多 React 库已经证明了它价值,例如耳熟能详 react-redux。...但在实际开发,前端无法逃离 DOM ,而逻辑与 DOM 相关性主要呈现 3 种关联形式: 与 DOM 相关,建议使用父组件,类似于原生 HTML 编写 与 DOM 不相关,校验、权限、请求发送、数据转换这类...最好是能封装成木偶组件(Dumb Component)。HOC 适合做 DOM 不相关又是多个组件共性操作。 Form ,validator 校验操作就是纯数据操作,放到了 HOC 。...具体实践 HOC 在真实场景下运行非常多,之前笔者在 基于Decorator组件扩展实践 一文也提过使用高阶组件将更细粒度组件组合成 Selector 与 Search。

95310

React高级特性--Render Props

正文使用Render Props来完成关注点分离在React组件是代码复用基本单元(又来了,官方文档不断地在强调这个准则)。...到目前为止,在React社区里面,关于共享state或者某些相似的行为(比如说,将一个组件封装进另一拥有相同state组件)还没有一个明朗方案。...换句话说,如果别的组件也需要知道目前光标的坐标值,那我们能不能将这种行为封装好,然后在另外一个组件里面开箱即用呢?因为,在React组件是代码复用基本单元(again)。...我们可能会通过向组件传递一个叫mouse(它值为{{x,y}})prop来获得当前光标所在位置。...一个很有意思,并值得我们注意事情是,你完全可以通过一个带render属性普通组件来实现大部分HOC

41620

React高级特性之Render Props

正文使用Render Props来完成关注点分离在React组件是代码复用基本单元(又来了,官方文档不断地在强调这个准则)。...到目前为止,在React社区里面,关于共享state或者某些相似的行为(比如说,将一个组件封装进另一拥有相同state组件)还没有一个明朗方案。...换句话说,如果别的组件也需要知道目前光标的坐标值,那我们能不能将这种行为封装好,然后在另外一个组件里面开箱即用呢?因为,在React组件是代码复用基本单元(again)。...我们可能会通过向组件传递一个叫mouse(它值为{{x,y}})prop来获得当前光标所在位置。...一个很有意思,并值得我们注意事情是,你完全可以通过一个带render属性普通组件来实现大部分HOC

44410

React】2054- 为什么React Hooks优于hoc

在现代 React世界,每个人都在使用带有 React Hooks函数组件。然而,高阶组件HOC概念在现代 React世界仍然适用,因为它们可以用于类组件和函数组件。...在现代 React世界,每个人都在使用带有 React Hooks 函数组件。然而,高阶组件HOC概念在现代 React世界仍然适用,因为它们可以用于类组件和函数组件。...这是有解决方案,但正如我之前提到,这将使得 withFetch HOC 比它应该更复杂,以及如何在底层组件中使用合并数据或数据数组情况并不比开发人员经验来得更好。...如果以后我们决定以不同方式处理这两个错误,我们可以在这一个组件做到这一点,而不是在我们抽象(无论是 HOC 还是Hook)。...; } return ; }; 通过这些额外参数 -- 这里通过包围 HOC 高阶函数传递 -- 我们获得了在创建增强组件时提供参数额外能力

9300

写给vue转react同志们(5)

前提要顾: 点击查看该系列专栏 Vue 与 React 高阶组件 我们知道 React 中使用高阶组件(下面简称HOC)来复用一些组件逻辑。...HOC 自身不是 React API 一部分,它是一种基于 React 组合特性而形成设计模式。具体而言,高阶组件是参数为组件,返回值为新组件函数。...那你想在 Vue 强行使用像 React 那样高阶组件呢?那当然可以。只是 Vue 官方不怎么推崇 HOC,且 Mixins 本身可以实现 HOC 相关功能。...不过话又说回来,起初 React 也是使用 Mixins 来完成代码复用,比如为了避免组件非必要重复渲染可以在组件混入 PureRenderMixin。...当然每种方案都各有千秋,只是是否适合自己框架。 那我们回归 HOC,在 React 如何封装 HOC 呢?

36720

bootstrap-react或者bootstrap-vue

商业转载请联系作者获得授权,非商业转载请注明出处。 Bootstrap 这种用 CSS composition(也就是类名组合)库,没办法上 React 获得任何优势吧。...现在你也可以在 React 组件中用一堆 Bootstrap CSS 类啊,写在 className 就可以了…… 第二种上 React 思路是提供 React 组件。...那 Bootstrap 能提供什么类型组件呢?如果还是提供 CSS 的话,那就必须要支持同样 composition。那 React composition 怎么做呢?HOC 咯。...对比 Material-UI,别人用 React 是因为每个组件有独立 JavaScript 功能。...Bootstrap JavaScript 功能很少,一个 jQuery 就解决了,甚至现在很多人喊着 Bootstrap 要出一个不依赖 jQuery 版本,那是不太需要以组件方式进行封装

44730

react进阶」一文吃透React高阶组件(HOC)

hooks可以将一段逻辑封装起来,做到开箱即用,我这里就不多讲了,接下来会出react-hooks原理文章,完成react-hooks三部曲。...2 高阶组件产生初衷 组件是把prop渲染成UI,而高阶组件是将组件转换成另外一个组件,我们更应该注意是,经过包装后组件获得了那些强化,节省多少逻辑,或是解决了原有组件那些缺陷,这就是高阶组件意义...④ 控制渲染:劫持渲染是hoc一个特性,在wrapComponent包装组件,可以对原来组件,进行条件渲染,节流渲染,懒加载等功能,后面会详细讲解,典型代表做react-reduxconnect和...我会针对高阶组件初衷展开,详细介绍其原理已经用法。跟上我思路,我们先来看一下,高阶组件何在我们业务组件中使用。...这用高阶组件模式,可以灵活控制React组件层面上,props数据流和更新流,优秀高阶组件有 mobx observer ,inject , react-reduxconnect,感兴趣同学

1.8K30

Note·Use a Render Prop!

在 Vue ,可以使用 mixins 混入方式实现代码复用,而在 React ,代码复用经历从 mixins 到 HOC,然后到 render props 演变,对于这几种方案曲折这里梳理下。...将获取鼠标坐标位置代码提取封装为 MouseMixin,然后在 createClass 创建组件时通过 mixins 混入到组件,这样这个新组件就有了获取鼠标坐标位置功能。...在 HOC 范式下,当组件类(如上例 AppWithMouse)被创建后,发生了一次静态组合。...我们无法在 render 方法中使用 mixin 或者 HOC,而这恰是 React 动态组合模型关键。当你在 render 完成了组合,就可以利用到所有 React 生命期优势了。...除了上述缺陷,由于 HOC 实质是包裹组件并创建了一个混入现有组件 mixin 替代,从 HOC 返回组件需要表现得和它包裹组件尽可能一样,因此会产生非常模板代码(boilerplate

73320

React深入】从Mixin到HOC再到Hook(原创)

React应用Mixin React也提供了 Mixin实现,如果完全不同组件有相似的功能,我们可以引入来实现代码复用,当然只有在使用 createClass来创建 React组件时才可以使用,因为在...React组件 es6写法它已经被废弃掉了。...高阶组件可以看作 React对装饰模式一种实现,高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新组件。 高阶组件HOC)是 React高级技术,用来重用组件逻辑。...而 React没有做这样处理,在默认情况下,表单元素都是 非受控组件。..."react-hooks/rules-of-hooks": "error" }} 自定义Hook 像上面介绍 HOC和 mixin一样,我们同样可以通过自定义 Hook将组件类似的状态逻辑抽取出来

1.7K31

React教程:组件,Hooks和性能

React 组件 此外,如果一个组件大于 2 到 3 个窗口高度,也许值得分离(如果可能的话) —— 以后更容易阅读。...React 受控组件与非受控组件 在大多数应用,需要输入和与用户进行某种形式交互,允许他们输入内容、上传文件、选择字段等。...可能会删除 HOC 并在你应用渲染 props ,尽管 hook 被设计用于解决其他问题,但仍会引入新问题。 能够被熟练React开发人员定制 默认 React hook 很少。...官方文档还提到了更多选择,例如 Reason(由Facebook开发并在React社区获得普及),Kotlin(由JetBrains开发语言)等等。...请注意,Webpack 和 CRA 不是唯一选项,因为你可以使用其他构建工具, Brunch。这通常包含在官方文档,无论是官方 React 文档还是特定工具文档。

2.6K30

react面试题整理2(附答案)

何在React中使用innerHTML增加dangerouslySetInnerHTML属性,并且传入对象属性名叫_htmlfunction Component(props){ return...(2)非受控组件 如果一个表单组件没有value props(单选和复选按钮对应是checked props)时,就可以称为非受控组件。在非受控组件,可以使用一个ref来从DOM获得表单值。...HOC 自身不是 React API 一部分,它是一种基于 React 组合特性而形成设计模式。具体而言,高阶组件是参数为组件,返回值为新组件函数。...(1)HOC 官方解释∶高阶组件HOC)是 React 中用于复用组件逻辑一种高级技巧。HOC 自身不是 React API 一部分,它是一种基于 React 组合特性而形成设计模式。...自动绑定: React组件,每个方法上下文都会指向该组件实例,即自动绑定this为当前组件

4.3K20

2021高频前端面试题汇总之React

React 组件怎么做事件代理?它原理是什么?...自动绑定: React组件,每个方法上下文都会指向该组件实例,即自动绑定this为当前组件。 3....HOC 自身不是 React API 一部分,它是一种基于 React 组合特性而形成设计模式。具体而言,高阶组件是参数为组件,返回值为新组件函数。...(1)HOC 官方解释∶ 高阶组件HOC)是 React 中用于复用组件逻辑一种高级技巧。HOC 自身不是 React API 一部分,它是一种基于 React 组合特性而形成设计模式。...一些库 React 视图在视图层禁止异步和直接操作 DOM来解决这个问题。美中不足是,React 依旧把处理 state 数据问题留给了你。Redux就是为了帮你解决这个问题。

2K00

2022社招React面试题 附答案

React 组件怎么做事件代理?它原理是什么?...自动绑定: React组件,每个方法上下文都会指向该组件实例,即自动绑定this为当前组件。 3....HOC 自身不是 React API 一部分,它是一种基于 React 组合特性而形成设计模式。具体而言,高阶组件是参数为组件,返回值为新组件函数。...(1)HOC 官方解释∶ 高阶组件HOC)是 React 中用于复用组件逻辑一种高级技巧。HOC 自身不是 React API 一部分,它是一种基于 React 组合特性而形成设计模式。...一些库 React 视图在视图层禁止异步和直接操作 DOM来解决这个问题。美中不足是,React 依旧把处理 state 数据问题留给了你。Redux就是为了帮你解决这个问题。

2K50

react高阶组件概念与简单使用

react 高阶组件概念与简单使用# 1 react 高阶组件是什么# 高阶组件HOC)是 React 中用于复用组件逻辑一种高级技巧。...HOC 自身不是 React API 一部分,它是一种基于 React 组合特性而形成设计模式。 具体而言,高阶组件是参数为组件,返回值为新组件函数。...,它将多个组件公共逻辑部分抽离出来封装成了一个函数,这个函数接收那多个组件一个组件作为参数,然后再返回这个组件,从而实现多个组件那个组件最终效果。...2 react 高阶组件作用# 精简代码,封装复用逻辑 ​ ... 3 简单实现 react 高阶组件# /** * 需求简述: * 实现两个组件文本框, * 一个组件为外边框为1px绿色、里面显示内容为当前浏览器高宽...不要声明 HOC”,那以上方代码为例,我用函数式组件,我不在函数里面引用 HOC 在哪里引用呢?

53830
领券