问题标签 [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.
javascript - 如何将类包装在高阶组件中?
我想知道我是否可以将一个类组件包装在一个也有一个类的 hoc 中。
这是我正在使用的 hoc,现在我正在传递一个像这样的类组件:
当我运行它时,我收到此错误:
有可能吗?
谢谢!
reactjs - 如何使用 Apollo graphql HOC 执行多个查询?
我正在编写一个网络应用程序,我需要查询 Apollo 的本地状态以及远程 API。Apollo graphql
HOC 不允许发送多个查询,但提供了一些compose
功能。但似乎该@apollo/react-hoc
包没有它。不幸的是,将本地状态请求编写成远程状态请求不起作用(根据 DevTools,请求已发送,但未提供数据)。Reduxcompose
无论如何都无济于事(好吧,我很清楚为什么会这样)。在没有React 钩子的情况下解决这个问题的最佳方法是什么?
reactjs - 使用 HOC 将属性从子组件导出到父组件
我希望从子组件传递架构并组合架构并在主应用程序(父级)上使用它。它基本上是在组件级别的架构,需要从组件合并并在主应用程序中使用。
在应用程序内部,组件存在。
Hoc 将接收 Schema 并将其连接并将其导出到主应用程序(父级) 使用 HoC 导出模式的最佳方法是什么,然后在主应用程序上使用 HoC 从所有组件中获取所有模式。
我正在寻找从组件级别到顶层使用 Hoc 的最佳实践。有什么建议吗?
javascript - 如何在生产构建中获取 componentDidCatch 中的反应组件名称?
我在(componentDidCatch)内部使用了错误边界我想记录哪个反应组件在生产构建中中断。
结论是在生产构建中的 componentDidCatch 中获取反应组件名称。
我阅读了很多文章,下面的链接与我提出的问题相同,但这并不能解决我的问题。 按名称获取 React 组件
而且我还看到了一些与 webpack 相关的东西(生产配置的 uglify),但还不清楚。
让我知道是否有任何最简单的方法可以解决此问题
reactjs - Gutenberg 和 ESNext 中的多个高阶组件
我正在尝试在 Gutenberg 中使用 HOC withInstanceId
(生成唯一标识符以用作 HTML 中的 ID)和withColors
(在侧边栏中使用颜色选择器),但我不确定 ESNext 语法是否正确。(而且我认为技术上正确的非 ESNext 语法......)
这是我的出发点,但显然不正确:
一点指导将不胜感激。
javascript - React 中基于角色的授权中的 HOC 错误
我一直在尝试在 React 中实现基于角色的授权,如下所示
在 authorization.js 中,检查是否允许登录用户及其角色访问该页面:
在 App.js 中
在 Accounts.js 中:
但得到错误:
有什么建议么?
reactjs - 如何用 HoC 包装包含钩子的函数
正如标题所示,我希望能够在 HoC 中包装一个函数(包含)钩子。
在下面的示例中,我希望能够TestView
使用div
元素标记包装 JSX,其中className="someClassName"
. 但是我得到以下异常:
钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一: 1. 你可能有不匹配的 React 版本和渲染器(例如 React DOM) 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本相同的应用程序请参阅有关如何调试和修复此问题的提示
javascript - React:axios.interceptors 不能在 hoc 中工作
hoc withErrorHandler 中的 axios.interceptors 适用于 App.js 中的 clicked 方法,但不适用于 App.js 中的 componentWillMount 或 componentDidMount。我该如何解决?
应用程序.js
hoc/withErrorHandler.js
reactjs - React HOC 处理子组件 API 失败
我正在使用一个库中的组件,它接受一个accessToken
作为道具。与令牌类似
<AnalyticsChart accesstoken={this.state.token} />
并基于令牌,它会进行 API 调用并根据结果呈现 UI。现在,如果accesstoken
已经过期,它没有回调道具来通知父组件(我可以完全控制它)。
那么,有没有办法构建一个高阶组件,它可以监听子组件发出的 API 请求,或者只是观察 DOM 更改以查看是否长时间没有呈现任何内容?
例子-
reactjs - curry 函数(创建 HOC)中的反应钩子从 linter 'React Hook“useContext”不能在回调中调用'返回错误'
在我的项目中,我摆脱了类,我只是使用 Hooks。现在我正在尝试创建一个 HOC,我的 linter 在我的 curry 函数中使用 Hooks 返回一个错误。这是我的代码的简化版本:
完整的 eslint 错误是这个:
有什么线索吗?我真的很感激任何建议