在HoC中调用React挂钩
在HoC（高阶组件）中调用React挂钩是一种常见的模式，用于在高阶组件中复用逻辑。然而，这种做法在React的较新版本中可能会遇到一些问题，因为React挂钩有一些特定的使用规则。
基础概念
高阶组件（HoC）：高阶组件是一个函数，它接受一个组件并返回一个新的组件。高阶组件常用于代码复用、逻辑抽象和属性代理。
React挂钩（Hooks）：React挂钩是React 16.8版本引入的新特性，允许你在函数组件中使用状态和其他React特性，而不需要编写类组件。
相关优势
- 代码复用：通过高阶组件和挂钩，可以更灵活地复用逻辑。
- 简化组件：将复杂的逻辑从组件中抽离出来，使组件更简洁、易读。
类型
- 属性代理：高阶组件可以用来修改传递给被包裹组件的属性。
- 逻辑复用：高阶组件可以用来封装和复用逻辑。
应用场景
- 状态管理：在高阶组件中管理状态，并将其传递给被包裹的组件。
- 副作用处理：在高阶组件中处理副作用，如数据获取、订阅等。
问题及解决方法
在HoC中调用React挂钩可能会遇到的主要问题是，React挂钩必须在组件的顶层调用，而不能在条件语句、循环或嵌套函数中调用。此外，React挂钩必须按照它们在组件中出现的顺序调用。
示例代码
import React, { useState, useEffect } from 'react';
// 高阶组件
function withLogger(WrappedComponent) {
return function WithLogger(props) {
const [log, setLog] = useState([]);
useEffect(() => {
console.log('Component mounted');
return () => {
console.log('Component unmounted');
};
}, []);
return <WrappedComponent {...props} log={log} setLog={setLog} />;
};
}
// 被包裹的组件
function MyComponent({ log, setLog }) {
useEffect(() => {
setLog([...log, 'New log entry']);
}, [log]);
return (
<div>
{log.map((entry, index) => (
<p key={index}>{entry}</p>
))}
</div>
);
}
// 使用高阶组件
const EnhancedComponent = withLogger(MyComponent);
export default EnhancedComponent;参考链接
通过上述示例代码和参考链接，你可以更好地理解在HoC中调用React挂钩的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方法。
相关·内容
我有两个react项目父项目和公共项目(包含像header，footer这样的公共组件)
我在父级中定义了材料主题，并使用MuiThemeProvider以标准方式进行配置。
但是，此主题对象在Parent中定义的组件中可用，但在共享项目common中不可用。
我们非常感谢您的建议。
在2020年10月30日添加了以下更多详细信息
父组件
import React from "react";
import "./App.css";
import { BrowserRouter, Switch, Route } from "react-router-dom
浏览 1提问于2020-10-29得票数 1
因此，我需要访问context的值，而不是将其作为呈现函数调用。
不是这样的：
const Child = () => {
return (
<ThemeConsumer>
{context => {return <Text>{context}</Text>}}
</ThemeConsumer>
);
};
到目前为止，我有这样的想法：
import React from 'react';
export const ThemeContext = React.createContext
浏览 1提问于2019-02-16得票数 0
我发现使用<React component>和<React render>在react-router-dom 6.x中可能会被弃用，所以我遵循删除了component属性，而是将组件嵌套为<Route >节点的子节点。它工作得很好，直到我到达使用动态参数的路由，它抛出了一个错误。
我从..。
<Route exact path={`/:category`} component={CategoryPage} />
为了..。
<Route exact path={`/:category`}>
<CategoryPage /&g
浏览 0提问于2020-05-20得票数 0
1回答
我有一个带有redux状态和静态属性的组件，它依赖于状态。如何更新此静态属性？
import React, { Component } from 'react';
import CustomIcon from './CustomIcon';
import { connect } from 'react-redux';
import { getTranslate } from 'react-localize-redux';
class ExitButton extends Component {
static navigati
浏览 12提问于2017-08-18得票数 0
回答已采纳
我想知道我的代码出了什么问题-每次我得到这个消息“无法读取未定义的属性'params‘”，我想从一个页面传递一个道具到另一个页面，我已经获取了多个API，并从第二个API中获取了一些图像，以便在另一个视图中传递它。第一个应用程序接口在ProfileHeader.JS上运行良好，但在ProfileTabs.JS上的第二个应用程序接口面临一些问题。
我不知道我的问题在哪里--“对不起，我的英语很差。”
我的第一个观点是：
ProfileLanding.JS
import React, { useState, useEffect } from 'react'
import
浏览 2提问于2019-11-04得票数 1
我有代码
router.js
import React from 'react';
import {render} from "react-dom";
import history from './history';
import {Router, Route} from 'react-router'
import Main from "./main/component";
import Profile from "./profile/component";
import TextStatus f
浏览 0提问于2018-01-11得票数 3
回答已采纳
React组件有自己的生命周期(componentWillMount、componentDidMount等)，saga也有自己的生命周期(作为中间件运行)。
有没有办法同步这两个生命周期？
我认为当我们想要通过授权保护某些组件(在多个访问级别上)时，这可能是问题所在
浏览 1提问于2016-10-14得票数 0
我目前有一个特别的组件，我想移植到使用react钩子的地方，基本上就是开始思考这个想法了。 这个即席组件基本上为包装的组件提供了显示警告对话框的功能。HOC组件管理自己的状态，这使得包装的组件可以非常轻松地显示警告对话框。包装的组件只需调用传递给props的函数来显示它。 下面是HOC现在的样子： function withAlertDialog(WrappedComponent) {
return class extends Component {
constructor(props) {
super(props);
this.state = {
浏览 13提问于2019-05-29得票数 0
回答已采纳
import React, { useEffect, useState } from "react";
function logProps(WrappedComponent) {
return class extends React.Component {
componentDidUpdate(prevProps) {
console.log("inside componentDidUpdate");
}
componentDidMount() {
console.lo
浏览 0提问于2021-01-30得票数 3
回答已采纳
1回答
问题：
我正在尝试从create-react-app中的外部URL加载一个javascript文件。在react开始呈现根组件之前，我需要这个javascript文件完成加载和执行。
这是因为我需要这个javascript文件放在组件树下更靠下的window对象上。不幸的是，我不能控制这个javascript文件，但我需要它。
此文件的URL因环境(dev、staging、prod等)而异。构建过程当前只构建一次create-react-app，然后在每个环境中提升包。我从一个JSON文件中获取相对URL，该文件是在应用程序开始时加载的。
尝试的解决方案
我尝试过使用react-helmet，
浏览 1提问于2018-07-11得票数 0
我正在做一个小项目的最后一步，它使用一个高阶组件(HOC)来呈现一个简单的类似Tinder的应用程序。
内部组件是一个基于类的组件，它有自己的fetch()调用，为用户和图片呈现数据。外部HOC是一个功能组件。要让应用程序正常工作，我需要做的就是找到一种方法来刷新内部组件，并在用户按下按钮时触发API调用。我正在尝试用HOC中的useState钩子来做这件事。
import React, { useState } from 'react';
export default function TinderCard(component) {
return function (p
浏览 2提问于2020-12-06得票数 0
2回答
我有这个简单的组件
class App extends React.Component {
a = () => null
b = () => null
c = () => null
render() {
return (<div>hey123</div>)
}
}
这是我的第二个组件，引用到第一个
class BApp extends React.Component {
setComponentRef = ref => {
console.log('ref', ref)
this.
浏览 0提问于2018-05-03得票数 2
回答已采纳
我有一个登录组件和一个App组件。App组件在上下文提供程序中包含Login组件。登录组件依次由withFormik高级组件包装以进行表单验证。当我试图在Login组件中使用useContext()钩子时，它无法使用错误进行编译：
./src/components/login/Login.jsx
第12行:在函数"useContext“中调用React”useContext“，该函数既不是React函数组件，也不是自定义React函数react/rules of hooks。
也试过了，但没能解决这个问题。:(
Login.jsx：
import React, { useContext
浏览 0提问于2019-06-07得票数 1
Failed to compile. Attempted import error: 'withRouter' is not exported from 'react-router-dom'. 我的代码喜欢，而且我已经安装了react-router-dom的react-route，现在我有10次重新输入应用程序 import React from 'react';
import {withRouter} from 'react-router-dom';
import './menu-item.scss';
c
浏览 217提问于2021-11-11得票数 2
1回答
我有一个要传递ref值的组件。我需要在高阶组件中获取传递的ref值。下面是代码示例: Component with HOC：
import React from "react";
import HOC from './hoc';
const MeasuredInput = () => {
const ref = React.createRef();
return (
<div>
<button ref={ref}>Click me!</button>
</div>
)
浏览 24提问于2020-02-19得票数 1
6回答
我已经创建了一个高阶组件，它应该为我的组件添加一些额外的功能。然而，当我在这个组件中使用react时，我会得到下面的eslint警告。
React "React.useEffect“不能在回调中调用。必须在React函数组件或自定义React函数中调用。(反应钩/钩规则)
我为什么要收到这个警告？在HoC中使用钩子被认为是不好的做法吗？
最起码的例子：
const Hello = props => <p>Greetings {props.name}</p>;
const Wrapper = Component => props =>
浏览 7提问于2019-05-24得票数 20
回答已采纳
我有以下代码，它包装了一个向子组件提供上下文的函数，但是，当我尝试呈现它时，它失败了，在React 16.6.3中，我的包装组件没有呈现
import React from 'react'
export const WishlistContext = React.createContext(null)
const AddToWishListButtonWrapper = (WrappedComponent) => {
return class WishlistButton extends React.Component {
state = {token:
浏览 1提问于2019-01-03得票数 2
3回答
在React docs In HOC部分中，有一个示例 const CommentListWithSubscription = withSubscription(
CommentList,
(DataSource) => DataSource.getComments()
); 你能解释一下函数作用域是如何工作的吗？他们把第二个参数作为箭头函数，在这个箭头函数中，我们有DataSource参数并返回DataSource.getComments()的结果 HOC withSubscription的实现 function withSubscription(WrappedCompone
浏览 29提问于2020-06-28得票数 0
回答已采纳
1回答
反应破坏重命名
、、
，这是的目标
来自未用create-react-app创建的应用程序/模块
class Hoc extends React.Component {
render() {
const {component: Component} = this.props
return (
<div>
<Component />
</div>
)
}
}
描述：
使用基本的ES6用重命名进行析构，这样react元素就可以作为<Component />引用，而不仅仅是变量{component}。
浏览 6提问于2017-08-31得票数 0
我写了一些HOC，我需要传递给这个HOC一个动态对象，它是我在某个生命周期级别上创建的，我没有让他作为道具。如果我尝试传递一些静态值(例如，从start初始化myObj )，它会按预期工作，并且我会得到正确的值。
假设这是我的组件类：
let myObj = {};
class Test extends React.Component
{
constructor(props) {
super(props);
.....
}
render() {
myObj = {test:&#
浏览 14提问于2019-03-14得票数 6
我正在尝试为我的hoc编写测试用例，我调用了另一个hoc。代码看起来像：
getData.jsx
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
export default function getData(Receiver) {
function fetchData(props) {
const [dataInState, setData] = useState([]);
useE
浏览 0提问于2019-09-16得票数 2
我正在尝试测试一个组件。测试可以在没有样式的情况下工作，但是现在我用Material-UI设置了样式，测试就不再有效了。如果使用Material-UI设置样式，该组件似乎只会呈现为[object Object] (未定义)。 我有一个要导出的表单：export default withStyles(styles)(ShuttleForm); 但是我现在可以测试组件ShuttleForm，或者任何使用它的组件，因为我正在将它导出为withStyles。 如何测试带样式的material-ui组件？我看过material-ui文档，并使用了他们的createShallow，但这并没有起到什么作用
浏览 9提问于2019-10-11得票数 2
1回答
我是新来的React JS。将相同的功能/特性应用于大多数页面的最佳实践是什么？
案例:我有员工，部门，沙拉利菜单(组件)，我希望所有这些页面都有功能和反应路由器提示功能，以防止用户离开页面时，有更新(脏)的形式。
现在，我粘贴每个组件的代码，并在将新组件添加到我的应用程序时粘贴。我已经尝试了高阶组件，是否可以从HOC函数调用另一个HOC函数？injectIntl是一个即席函数。我想构建我自己的HOC，它将被称为injectIntl。
我的HOC：
import { Component } from "React";
import React from 'react&#
浏览 3提问于2018-01-04得票数 0
我正在用nextjs构建一些网页，我需要确保只有在用户通过身份验证的情况下才能访问某些页面，如下所示： import UserManager from "../managers/user_manager";
import { useRouter } from "next/router";
import LogInPage from "../pages/auth/login";
export default function EnsureAuthenticated(OriginalComponent) {
const router =
浏览 14提问于2021-07-02得票数 0
1回答
我使用了react-router-dom，它现在看起来是这样的： <Switch>
<Route path={"/layouts/:layoutID"} component={Layouts} />
<Route
path={"/dashboard/:dashboardID"}
component={Dashboards}
/>
</Switch> 当用户导航到此组件中的"/dashboard/:dashboardID
浏览 27提问于2020-10-12得票数 0
回答已采纳
1回答
我正在尝试创建一个在React js中为图标组件中的参数"color“赋值的HOC。我有三种不同的颜色。它们如下所示: pimary是#f7a014二级是#dd8b08三元是#56t00
所以我可以这样做：
<MyComponent color='primary' />
下面是我的withColor HOC：
import React from 'react';
import propTypes from 'prop-types';
function mapColors(color) {
if (color ===
浏览 1提问于2018-08-22得票数 0
我让一个React组件导入另一个React HOC。 我的React HOC： import { withRouter } from "react-router";
...
const InnerComponent: FC<any> = (props): ReactElement => {
...
}
const withData = compose(
graphql(SOME_QUERY, {
props: mapProps,
options,
}),
injectIntl
);
export default withRou
浏览 17提问于2021-04-15得票数 0
我试图在我的react应用程序中使用redux，但是我发现我可以在我的应用程序中显式地使用redux，而无需使用react-redux库。 const redux = require('redux'); 我想知道为什么我们甚至需要在我们的环境中使用react-redux库？有人能帮我一下吗？
浏览 51提问于2021-11-05得票数 0
回答已采纳
1回答
我在我的应用程序中使用了firebase身份验证，它正在工作--但是我很难理解提供商是如何将数据传递到App.js中的应用程序组件中的。它似乎不是显式传入的。是否存在传递数据的命名约定或其他东西？
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
im
浏览 1提问于2021-07-21得票数 0
我正在学习HOCs，并不断阅读上面的引语，但我不明白它的含义。如果我的自组织将一个方法添加到我的消费组件中，我可以像这样在呈现方法中使用该方法吗？如果不是，我将如何做我在这里试图做的事情：
import React, { Component } from 'react';
import { withMyHOC } from '../with_my_component'
class MyComponent extends Component {
constructor(props) {
super(props);
}
render() {
浏览 2提问于2019-11-19得票数 1
回答已采纳
我对React相当陌生--本机(并为此目的作出反应)，我刚刚开始使用高阶组件。我知道这些应该将一个组件作为参数，返回一个其他组件。
这里我的问题是，我希望我的HOC()函数使用多个参数，即类似于HOC:: C: React.Component, D: React.Component => H: React.Component(在类似Haskell的语法中)的东西。
现在，问题(以及我发布这篇文章的原因)是，它让我觉得我的代码有点笨重，因为我必须传递道具。最后我做的是一个函数，它包含两个数组，第一个组件数组和另一个道具，它们必须以相同的顺序给出。(因此propList[i]是组件compo
浏览 2提问于2017-11-22得票数 1
回答已采纳
1回答
我有一个使用IdleTimer的即席组件。我正在创建一个空闲超时功能，以便在react，redux应用程序中的某个时间后注销用户。我很难把它传到我的其他路线上。实现这一目标的最佳方式是什么？
HOC (IdleTimer)
import IdleTimer from "react-idle-timer";
import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { Switch, Route } from 'react-rout
浏览 10提问于2020-02-11得票数 0
3回答
我正在尝试创建一个更高阶的组件，但是不断地获得这个eslint。
组件定义缺少显示名称。
我尝试像下面这样添加一个显示名，但是它仍然在抱怨。
import React from 'react';
const HOC = props => (WC) => {
WC.displayName = 'test'
return (
<WC />
);
}
export default HOC;
浏览 1提问于2019-02-09得票数 14
回答已采纳
1回答
更新后，React不再使用高阶组件(HOC)中的useEffect钩子编译代码。我有一个连接到Redux存储的HOC，如果需要，它会分派一个操作来获取数据。
import React, {useEffect} from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import SpinCenter from '../components/SpinCenter'
import { fetchObject } fr
浏览 26提问于2019-11-13得票数 2
回答已采纳
我想将用户重定向到他们试图访问需要身份验证的端点的登录页面，但我想保存他们尝试访问的页面，以便他们登录后，我可以将他们重定向到该页面。在较旧版本的react路由器中，我相信您可以使用包装器(来自的示例)来完成此操作：
export default (ComposedComponent) => {
return class AuthenticatedComponent extends React.Component {
static willTransitionTo(transition) {
// This method is called before tra
浏览 4提问于2016-07-29得票数 0
回答已采纳
1回答
大约几个星期以来，我正在编写一些教程，以了解自己的一些反应。
现在，我正在尝试让Auth与管理仪表板一起工作。我有一个侧边栏在仪表板上，并希望它切换。在我添加Auth之前，这是有效的。现在我有一个这样的点：
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Route, Redirect} from 'react-router-dom';
export const PrivateRoute = ({component: Com
浏览 0提问于2017-07-22得票数 0
5回答
我正在用写TypeScript。专案应该接受比包装组件多一个支柱，所以我写了以下文章：
type HocProps {
// Contains the prop my HOC needs
thingy: number
}
type Component<P> = React.ComponentClass<P> | React.StatelessComponent<P>
interface ComponentDecorator<TChildProps> {
(component: Component<TChildProp
浏览 8提问于2017-04-28得票数 19
回答已采纳
问题很简单。如何在你的React博客中获取数据并保持干爽？假设你的博客中只有两个组件-- PostsList和SinglePost，在这两个组件中，你必须获取数据，激活isLoading状态等。 我对这种情况进行了一点调查，查看了大型无头CMS提供商的React-blog演示应用程序，比如Prismic或Sanity.io，它们都只是在PostsList和SinglePost中重复fetch函数。 有谁知道吗？你能给我推荐一些好的资源吗？
浏览 16提问于2021-01-27得票数 1
回答已采纳
我正在开发一个带有React和阿波罗GraphQL的网络应用程序。大多数时候我使用@apollo/react-hoc，但是一些遗留组件使用@apollo/react-components。此时，我无法重构这些组件。在将路由转移到单独的文件后，我开始遇到以下问题：
application-b17cb4b752e454bf66e1.js:303755 Uncaught Invariant Violation: Could not find "client" in the context or passed in as an option.
Wrap the root compon
浏览 3提问于2019-11-17得票数 2
回答已采纳
我有一个前端的反应和阿波罗客户端，并试图写一些简单的测试。 我的应用程序如下所示： ApolloProvider.js import React from "react"
import App from "./App"
import ApolloClient from "apollo-client"
import { InMemoryCache } from "apollo-cache-inmemory"
import { createHttpLink } from "apollo-link-http"
impo
浏览 41提问于2020-07-16得票数 2
2回答
我正在为我的各种React组件构建一个更高阶的组件。在这种情况下，我需要访问子对象的方法并调用它们。我该怎么做呢？
示例：
export default function withHOC(Component) {
return class extends React.Component {
constructor(props) {
super(props);
}
componentDidMount() {
if (Component.someFunction) {
Component.someFunction()
浏览 19提问于2018-03-02得票数 3
我试图子类一个React组件，并且没有调用重写的方法：
class Foo extends React.Component {
someMethod() { ... }
render() {
return <div>{this.someMethod()}</div>;
}
}
class Bar extends Foo {
someMethod() {
// Never gets called
}
}
实际上，当我在DOM中呈现一个<Bar />并查看调试器中的组件时，它将组件类型显示为'Foo‘。
(另外，请
浏览 3提问于2016-05-17得票数 5
回答已采纳
我在react-redux中使用React和Redux，我正在创建一个高级组件，我想连接到Redux存储，如下所示：
const HoC = parameter => WrappedComponent =>
return class WithSelected extends Component {
// ..some use of 'parameter'
render() {
return <WrappedComponent />
}
[...]
const exportComp
浏览 2提问于2019-11-20得票数 5
回答已采纳
1回答
大家好，我想使用withAuth HOC来决定HomePage是作为仪表板还是以来宾homePage的形式呈现。此外，我希望将此逻辑与其他组件一起使用。但是每当我试图用map状态连接我的临时状态以支持它返回时，我就会陷入错误。
TypeError: Object(…)不是一个函数
img :-
。我看到了其他类似的stackOverflow解决方案--，但它们都无法清除我的错误。
我也尝试过使用compose，但是即使没有起作用，out.If，我也删除了连接，它的工作方式类似于charm.But，在我的特殊情况下，我需要redux状态。另外，我还想使用的钩子，但我现在只想保持简单
浏览 2提问于2020-04-11得票数 1
回答已采纳
我正在尝试定义一个在满足特定条件的情况下添加道具的HOC，但我不知道如何让它工作。
下面是一个简单的…示例
// @flow
import * as React from 'react'
type EnhancedProps = {| addFoo?: boolean |}
type BaseProps = {| foo?: string |}
type HOC =
| (Component: React.ComponentType<{| foo: string |}>) => React.ComponentType<EnhancedProps
浏览 2提问于2018-12-20得票数 1
1回答
我试图在React.js中使用一个函数组件来创建一个简单的自组织函数(高阶函数)。我已经完成了以下操作，并且它是编译的，但是在本地主机上没有显示..？
//App.js
import React from 'react';
import HOC from './HOC';
import InnerCom from './InnerCom';
import './style.css';
export default function App() {
const HOCBtn = HOC(InnerCom)
return
浏览 2提问于2022-05-06得票数 0
成功地拔出了一个带有问题的代码框，请有一个。
在使用react时，一切都很好--阿波罗2.5，现在我们已经开始了迁移到3.0的过程。
package.json相关部分的快照
"@apollo/client": "^3.0.0-beta.19",
"@apollo/react-components": "^3.1.3",
"@apollo/react-hoc": "^3.1.3",
现在我得到了下面的错误
Could not find "client" i
浏览 2提问于2020-01-08得票数 1
在使用React 16的新特性: componentDidCatch时，我尝试编写一个HOC来抽象代码。并用装饰器实现它。代码如下：
import * as React from 'react';
export function catcher<P, T extends React.ComponentClass<P>>(Target: T): T {
class HOC extends Target {
}
return HOC;
}
就像这样使用它：
@catcher
export class Foo extends React.Comp
浏览 0提问于2017-10-30得票数 0
我想在创建一个随机组件之后，但在渲染它之前调用它的一个方法。在呈现父对象之前执行子对象的特定计算。一个简单的静态应该可以工作。
class Container extends ReactWrapper{
render() {
const rClass = React.createClass(this.getCCArgs());
var newData = rClass.expectedUtilityFunction(data);
// render parent with new data.
return (<div {...this.pr
浏览 0提问于2019-06-07得票数 0
1回答
假设我有一个这样的HOC：
const myHoc = ComposedComponent => class Hoccomp extends Component {
componentWillMount() {
this.foo = 'bar';
}
render() {
return (
<ComposedComponent {...this.props}/>
);
}
};
如何运行测试来确定this.foo === 'bar'？我目前正在使用react-addons-test-util
浏览 0提问于2016-01-10得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
