问题标签 [high-order-component]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
83 浏览

reactjs - 无法将类型分配给 React 高阶组件

我需要创建一个 HOC,它采用一个组件并返回一个采用扁平化道具的新组件(我正在使用扁平化来实现它)并将未扁平化的道具应用于原始组件。

没有类型的 HOC 看起来像这样(我已经对其进行了测试并且它按预期工作):

问题是现在我需要向它添加类型所以这是我认为应该工作的:

此解决方案导致最终返回线路出现此错误

0 投票
2 回答
141 浏览

reactjs - 在 React 中何时使用花括号以及何时使用角度

例如:

为什么我不能使用 {Avatar(props.author)} 或 {Avatar() user={props.author}}?我知道我可以在花括号中使用函数,它是如何工作的?

0 投票
1 回答
22 浏览

server-side-rendering - HOC、上下文 API 和下一页

可以在下一页中使用带有上下文 api 的 Hoc 吗?

我有一个由 SSR 生成的下一页,以及一个 HOC privateRoute 来验证此页面上的授权。但是对于每次访问,我们都有一个授权请求,它的声音就像一个问题。

我的想法是使用 contexApi 一次获取数据,然后在 auth 私有路由上重用它。

任何人都有一个最小的例子吗?

谢谢。

0 投票
1 回答
425 浏览

reactjs - 带有身份验证会话的 React 应用程序中的 Redux 与 HOC

我在框架 Next.js 中有 React 应用程序(但框架并不重要),并实现了身份验证。

当前应用程序在首次加载后通过 API 调用获取用户会话数据(我正在next-auth为此使用)。这导致加载和会话获取之间存在间隔,这导致用户在整个应用程序中看到加载微调器的间隔很小。

我想通过实施 SSR(服务器端渲染)来缓解这种情况,我可以在其中使用会话数据来补充初始响应。

这可以通过getServerPropsComponent 中的方法在 Next.js 中轻松完成,但问题是我需要在我拥有的每个页面上实现此方法。

这就是为什么我正在寻找一种方法使会话状态在整个应用程序中全局化,以便每个页面(组件)都可以访问此会话数据。

我的主要问题是,如果我应该使用 HOC 包装器来实现getServerProps接收会话数据,或者我应该使用 Redux 存储并通过相同的方法水合这个存储。

我不确定 HOC 是否仍被广泛使用,或者它们现在已被弃用。

我不想getInitialProps在 Next.js 自定义_app.js文件中实现,因为这将禁用静态生成页面的能力,并且会话将在每个页面中可用。我计划该应用程序仅在大约一半的页面中需要此会话数据。

那么我应该使用 HOC 还是为此添加 redux 存储?

0 投票
1 回答
103 浏览

javascript - 高阶组件 (lit-html)

我正在开发一个带有lit-HTMLhaunted的 Web 组件库。我需要创建一个 HOC,因为我想在将道具传递给我的组件之前更新它们。我尝试了一些东西,效果很好。

但是现在,“this”在我的组件中是未定义的。我尝试绑定“this”,但没有任何效果。“this”仍未定义

如果有人已经尝试创建高阶组件?你能分享我一些例子吗,请

0 投票
1 回答
368 浏览

reactjs - 无法将 HOC 与 React-Router 一起使用:类型“元素”不可分配给类型“组件类型”

我有一个带有 React-Router 的高阶函数,但无法使其工作,无论是这种方式还是使用

return class extends React.Component { render{ ... }

但这失败了:Type 'Element' is not assignable to type 'ComponentType<any>

这失败了:index.js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

我在用:

  • @types/react": "^17.0.5"
  • @types/react-dom": "^17.0.0"
  • 反应”:“^17.0.2”
  • 反应域”:“^17.0.2”
  • react-router-dom": "^5.2.0"

相关: HOC:类型“元素”不可分配给类型“FC<P>”

0 投票
1 回答
69 浏览

reactjs - 使用 HOC 增强反应组件

我需要创建一个可重用的相机组件,为此我想传递一个自定义记录按钮,我需要附加额外的功能或覆盖按钮文本。

这里有一个例子:

https://codesandbox.io/s/react-hoc-ksjbf

我创建了一个 hoc.js,它采用自定义组件并尝试覆盖文本道具,但我有这个错误:

元素类型无效:应为字符串(用于内置组件)或类/函数(用于复合组件)但得到:对象。

我不明白这是错的,有什么想法吗?

0 投票
1 回答
175 浏览

reactjs - 我可以在 HOC(高阶组件)中使用 useState 吗?

0 投票
0 回答
110 浏览

reactjs - 如何在 React 的 HOC 中重用模态窗口

如果用户按下按钮两次,我会打开一个模式窗口。但我想在另一个组件中使用它,所以我想让它可重用。来自 Redux 的模态使用状态('randomActivity' 是数据,'repeatedActivity' 是布尔值)。所以,我对代码重构感到困惑。

这是初始代码

这是重构后的代码。

和临时的

0 投票
1 回答
330 浏览

html - Material-UI makeStyles 与 withStyles 生成的类名

我注意到使用makeStyles生成的类和钩子的使用遵循这个命名法:

制作样式

而用withStyles生成的类和 HOC 的使用遵循这个:

在此处输入图像描述

有没有办法使用makeStyles(我喜欢使用钩子)但保留withStyles的命名法?我喜欢这个,因为它更容易在浏览器中分析 html 并查明生成每个元素的类。