问题标签 [react-hoc]

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 回答
253 浏览

javascript - 如何将类包装在高阶组件中?

我想知道我是否可以将一个类组件包装在一个也有一个类的 hoc 中。

这是我正在使用的 hoc,现在我正在传递一个像这样的类组件:

当我运行它时,我收到此错误:

有可能吗?

谢谢!

0 投票
1 回答
1755 浏览

reactjs - 如何使用 Apollo graphql HOC 执行多个查询?

我正在编写一个网络应用程序,我需要查询 Apollo 的本地状态以及远程 API。Apollo graphqlHOC 不允许发送多个查询,但提供了一些compose功能。但似乎该@apollo/react-hoc包没有它。不幸的是,将本地状态请求编写成远程状态请求不起作用(根据 DevTools,请求已发送,但未提供数据)。Reduxcompose无论如何都无济于事(好吧,我很清楚为什么会这样)。在没有React 钩子的情况下解决这个问题的最佳方法是什么?

0 投票
0 回答
218 浏览

reactjs - 使用 HOC 将属性从子组件导出到父组件

我希望从子组件传递架构并组合架构并在主应用程序(父级)上使用它。它基本上是在组件级别的架构,需要从组件合并并在主应用程序中使用。

在应用程序内部,组件存在。

Hoc 将接收 Schema 并将其连接并将其导出到主应用程序(父级) 使用 HoC 导出模式的最佳方法是什么,然后在主应用程序上使用 HoC 从所有组件中获取所有模式。

我正在寻找从组件级别到顶层使用 Hoc 的最佳实践。有什么建议吗?

0 投票
1 回答
252 浏览

javascript - 如何在生产构建中获取 componentDidCatch 中的反应组件名称?

我在(componentDidCatch)内部使用了错误边界我想记录哪个反应组件在生产构建中中断。

结论是在生产构建中的 componentDidCatch 中获取反应组件名称。

我阅读了很多文章,下面的链接与我提出的问题相同,但这并不能解决我的问题。 按名称获取 React 组件

而且我还看到了一些与 webpack 相关的东西(生产配置的 uglify),但还不清楚。

让我知道是否有任何最简单的方法可以解决此问题

0 投票
1 回答
836 浏览

reactjs - Gutenberg 和 ESNext 中的多个高阶组件

我正在尝试在 Gutenberg 中使用 HOC withInstanceId(生成唯一标识符以用作 HTML 中的 ID)和withColors(在侧边栏中使用颜色选择器),但我不确定 ESNext 语法是否正确。(而且我认为技术上正确的非 ESNext 语法......)

这是我的出发点,但显然不正确:

一点指导将不胜感激。

0 投票
1 回答
440 浏览

javascript - React 中基于角色的授权中的 HOC 错误

我一直在尝试在 React 中实现基于角色的授权,如下所示

在 authorization.js 中,检查是否允许登录用户及其角色访问该页面:

在 App.js 中

在 Accounts.js 中:

但得到错误:

有什么建议么?

0 投票
1 回答
981 浏览

reactjs - 如何用 HoC 包装包含钩子的函数

正如标题所示,我希望能够在 HoC 中包装一个函数(包含)钩子。

在下面的示例中,我希望能够TestView使用div元素标记包装 JSX,其中className="someClassName". 但是我得到以下异常:

钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一: 1. 你可能有不匹配的 React 版本和渲染器(例如 React DOM) 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本相同的应用程序请参阅有关如何调试和修复此问题的提示

0 投票
1 回答
875 浏览

javascript - React:axios.interceptors 不能在 hoc 中工作

hoc withErrorHandler 中的 axios.interceptors 适用于 App.js 中的 clicked 方法,但不适用于 App.js 中的 componentWillMount 或 componentDidMount。我该如何解决?

应用程序.js

hoc/withErrorHandler.js

0 投票
1 回答
162 浏览

reactjs - React HOC 处理子组件 API 失败

我正在使用一个库中的组件,它接受一个accessToken作为道具。与令牌类似 <AnalyticsChart accesstoken={this.state.token} />并基于令牌,它会进行 API 调用并根据结果呈现 UI。现在,如果accesstoken已经过期,它没有回调道具来通知父组件(我可以完全控制它)。

那么,有没有办法构建一个高阶组件,它可以监听子组件发出的 API 请求,或者只是观察 DOM 更改以查看是否长时间没有呈现任何内容?

例子-

0 投票
2 回答
3251 浏览

reactjs - curry 函数(创建 HOC)中的反应钩子从 linter 'React Hook“useContext”不能在回调中调用'返回错误'

在我的项目中,我摆脱了类,我只是使用 Hooks。现在我正在尝试创建一个 HOC,我的 linter 在我的 curry 函数中使用 Hooks 返回一个错误。这是我的代码的简化版本:

完整的 eslint 错误是这个:

有什么线索吗?我真的很感激任何建议