如何从React自定义钩子和控制它的函数中正确地导出组件？
从React自定义钩子和控制它的函数中正确地导出组件可以通过以下步骤实现：
- 创建一个自定义钩子函数并在其中定义组件的逻辑和状态。自定义钩子函数必须以
use开头，例如useCustomHook。 - 在自定义钩子函数中，使用
useState或useReducer等钩子函数来管理组件的状态。 - 将需要导出的组件定义为函数组件，并在函数组件中调用自定义钩子函数。
- 在导出时，将函数组件作为默认导出。例如：
export default MyComponent;。
以下是一个示例代码：
import React from 'react';
// Step 1: 创建一个自定义钩子函数
const useCustomHook = () => {
// Step 2: 在自定义钩子函数中管理组件的状态
const [count, setCount] = React.useState(0);
// 自定义钩子函数的其他逻辑...
// Step 3: 在函数组件中调用自定义钩子函数
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
// Step 4: 导出函数组件
export default function MyComponent() {
// 调用自定义钩子函数
return useCustomHook();
}自定义钩子函数和导出的组件可以在React应用程序中重复使用，提供了一种可复用和组合逻辑的方式。在React开发中，自定义钩子函数可用于提取和共享组件逻辑，使代码更具可读性和可维护性。
对于腾讯云的相关产品和产品介绍链接地址，这里无法直接提供。建议访问腾讯云官方网站或联系腾讯云客服获取更详细的信息。
相关·内容
3回答
我使用React导入一个带有useState钩子的函数，这似乎破坏了它。我有一个用钩子反应的版本：
npm ls react => react@16.10.2
npm ls react-dom => react-dom@16.10.2
我可以很好地使用组件。当我包含一个钩子时，我会得到“无效的钩子调用”屏幕。
在我的图书馆项目中：
/**
* @class ExampleComponent
*/
import * as React from 'react'
import styles from './styles.css'
export d
浏览 1提问于2019-10-17得票数 2
回答已采纳
1回答
我想封装用于发送推送通知的函数的逻辑，以便可以从应用程序的任何位置调用它。push notifications要求在头中传递一个jwtToken。我想在useContext上调用AuthContextProvider来提取令牌，但是钩子规则不允许我的函数调用useContext，因为它不是一个React函数组件。
import React, { useContext } from "react";
import { AuthContext } from "@context/AuthContextProvider";
export const sendPushN
浏览 8提问于2022-10-12得票数 3
回答已采纳
1回答
在下面的代码中，我想知道如何导出函数setFormData。换句话说，我还想知道如何从不同的类型记录文件中导入setFormData。谢谢
文件A
import { SyntheticEvent } from 'react';
import { useDispatch } from 'react-redux';
import { useStatusActions } from '../../actions';
export const StatusHelper = () => {
const dispatch = useDispatc
浏览 1提问于2021-01-03得票数 0
React钩子刚刚在上一个React版本16.8.1中发布，提供了用于使用状态、效果和上下文的钩子。
如何构建自定义钩子？
浏览 1提问于2019-02-10得票数 0
回答已采纳
我正在将redux项目的react从类组件转换到钩子。
为了分派操作，我正在从react-redux导入{ useDispatch }。
然后，在每个功能组件中，我都有
const dispatch = useDispatch();
然后
dispatch(someAction())
这是正确的处理方法吗?还是应该将const dispatch = useDispatch()抽象到一个单独的文件中并始终重用？
谢谢
浏览 10提问于2020-05-22得票数 1
回答已采纳
4回答
responsive.js
import { useMediaQuery } from "react-responsive";
export default {
sm: useMediaQuery({ maxWidth: 768 }),
md: useMediaQuery({ minWidth: 769, maxWidth: 1024 }),
lg: useMediaQuery({ minWidth: 1025 }),
};
当我试图在App.js中导入它时
import {sm,md,lg} from "../../responsive"
错误发
浏览 2提问于2021-11-25得票数 1
回答已采纳
2回答
我正在尝试从在我的新项目中使用redux到使用钩子。我的理解是，我可以使用自定义钩子(如这个钩子)从各个组件加载它来访问相同的状态，类似于redux允许我访问状态的方式。
import { useState } from 'react';
export const useSelectedStore = () => {
const [selectedStore, setSelectedStore] = useState();
return [
selectedStore,
setSelectedStore,
];
};
我遇到的问题是，我有一
浏览 0提问于2020-05-13得票数 0
回答已采纳
1回答
我有这个组件： import React, { Component } from 'react';
import useFetch from "../useFetch";
export class Patient extends Component {
static displayName = Patient.name;
constructor(props) {
super(props);
}
浏览 29提问于2021-08-27得票数 0
我正在用react-router-dom构建一个应用程序，它通过发出AJAX请求进行初始化，然后使用路由将参数传递给基于类的子组件。我不知道如何同时呈现<Routes>，2)将参数传递给子组件。
我有一个具有功能的父级<RouterApp />组件和一个有条件呈现的组件<MyClassBasedComponent>。
在我最初的尝试中，我设置了如下代码：
function RouterApp() {
const preloadData = usePreloadData(); /*custom hook to make an AJAX call*/
浏览 9提问于2022-04-09得票数 1
回答已采纳
我使用React钩子来表示状态，但是当我使用useState时，它显示了一个错误，即：
Compiled with problems:X
ERROR
src\Form.js
Line 9:29: React Hook "React.useState" is called in function "form" that is neither a React function component nor a custom React Hook function. React component na
浏览 1提问于2022-02-27得票数 0
我被困在无效的钩子警告。这是一个第三方依赖，这也使得它难以控制。但这是一个引起问题的密码，
export class Component {
constructor() {
this._initReact();
}
_initReact(displayName) {
const component = React.forwardRef((props = {}, ref) => {
const _a = Object.assign(Object.assign({}, this._props), props),
浏览 3提问于2021-06-12得票数 0
回答已采纳
2回答
在单元测试React组件时，我需要模拟我的自定义钩子。对于这个简单的任务，我已经阅读了一些教程和stackoverflow答案，但没有幸运地正确实现它。 我对单项测试最简单的设置如下： // TestComponent.js
import React from "react";
import useTest from "./useTest";
const TestComponent = () => {
const { state } = useTest("initial_value");
return <div>
浏览 37提问于2020-12-13得票数 7
回答已采纳
1回答
MOBX和反应集成
、、、、
在重新编写客户端应用程序时出现有效的钩子错误.(升级代码)
mobx 6.3.8 mobx反应7.2.1，mobx状态树5.0.5反应17.0.1 RN 0.64.3。
我觉得错误就在这里。我搜索了使用商店的代码行，它让我找到了不推荐的网站.我不知道在哪里可以在站点中找到新的处理方法.这叫什么？
import { createContext, useContext } from "react"
import { RootStore } from "./root-store"
const RootStoreContext = createContext<
浏览 14提问于2022-01-07得票数 0
回答已采纳
如何在类组件中使用useNavigate( )React路由器-Dom钩子?
export default class MovieForm extends Form {
state = {
data : {},
error : {},
}
onSubmit(){
// Navigate to Another Component
}
render(){
// rendering the Form UI
}
}
我想在提交表单时导航到另一个组件。
官方React路由器-Dom文档说，我只能在一个功能组件中使用'useNavigate( )
浏览 6提问于2022-07-29得票数 3
回答已采纳
1回答
我为警告框编写了以下钩子：
import MuiAlert from '@material-ui/lab/Alert';
import { Snackbar } from '@material-ui/core';
import React from 'react';
export const useAlert = () => {
const [open, setOpen] = React.useState(false);
const [message, setMessage] = React.useState('&
浏览 2提问于2021-04-14得票数 10
3回答
我在我的项目中使用了react路由器-dom v6和mobex，当我使用它时会得到一个错误，如下所示。
main.tsx：
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './app/layout/App'
import './app/layout/styles.css'
import 'semantic-ui-css/semantic.min.css'
import 'react-toas
浏览 16提问于2022-07-30得票数 2
回答已采纳
我有一个，这里我使用mobx ("mobx- React "："^6.1.8")并使用。
我得到了错误:无效的钩子调用。只能在函数组件的主体内调用钩子。
商店index.js
import { useContext } from "react";
import UserStore from "./UserStore";
import SettingsStore from "./SettingsStore";
const useStore = () => {
return {
UserStore
浏览 5提问于2020-03-10得票数 1
下面是错误。
无效钩子呼叫。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React的不匹配版本和呈现器(例如React )，您可能正在违反Hooks的规则，您可能在同一个应用程序中有多个React副本。
有关如何调试和修复此问题的技巧，请参阅(我无法添加链接)。
您可能有React和呈现器(例如renderer )的不匹配版本
这是我的密码。这是违反了钩子的规则，还是其他的问题？
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
浏览 8提问于2022-04-22得票数 1
我有一个使用钩子useCallback的功能组件。过去几天一切都很好。一切都正常运作。今天我启动了这个应用程序，我有一个错误：
React Hook "useCallback" is called in function "loginPage" which is neither a React function component or a custom React Hook function
这是没有道理的，因为它一直很好。为了调试，我只是删除了页面上的所有代码，只是其中一段代码经过了编辑，甚至只是将一个useCallback模板放在了原来的位置，但仍然一样。
浏览 0提问于2019-04-26得票数 2
回答已采纳
我收到了这个错误“无效的钩子调用。钩子只能在函数组件的主体内调用。”当我试着运行我的函数时。我试图运行一个生成reCaptcha令牌的脚本，脚本如下所示：
这个组件应该生成令牌(这是我得到错误的地方)
import * as React from 'react'
import { RECAPTCHA_KEY } from '../../../utils/env'
// @ts-ignore
declare const window: any
interface RecaptchaProps {
actionType: string
}
export c
浏览 4提问于2021-03-31得票数 1
回答已采纳
我对React非常陌生，我有一个选择框，我想用API中的数据填充它。API请求传递该特定用户的ID，API将相应的地址返回给该用户。我需要稍后动态设置ID，但这不是我目前面临的问题；JSON响应很好，解析JSON对象并将所有键值对记录到控制台是可管理的；但是，在尝试将一个特定的键值对(包含用户地址的键值对)设置为Select Box中的选项时，我遇到了麻烦。我编写的函数映射所有数据并只返回一个特定的键值对，但它不断迭代JSON对象，因此冻结了整个应用程序；返回的地址应设置为选择框中的默认选项，该变量称为“object”。 当然有更好的方法可以做到这一点，但我不知道怎么做，所以任何提示或帮助都
浏览 6提问于2020-09-28得票数 0
回答已采纳
我有一个带有导出函数的助手文件。我有一个带有一些共享数据的ContextProvider。现在，我需要从助手函数内部更改上下文中的数据。
但是，如果我在函数体内调用useContext语句，如果在外部调用它，也会出现错误。
如果我在助手文件中创建一个默认函数MyHelper()，我可以调用useContext内部及其工作。但是，我不能使用来自另一个文件的不同函数作为api。只有MyHelper()。
如何在另一个.js文件中调用多个导出函数并更改上下文数据？
我制作了一个示例代码，它显示了我的问题，而没有原始代码的开销：
MyScreen.js
import React, {useContex
浏览 3提问于2021-03-19得票数 1
回答已采纳
4回答
我有一个调用异步函数的按钮，它是通过调用自定义的React钩子返回的，同时还有一个我需要跟踪的反应属性。
。
// useEmail.js
import { useState } from "react";
export default function useEmail(message) {
const [returnedMessage, setReturnedMessage] = useState("old");
const send = async () => {
// fake fetch
const whatever
浏览 0提问于2021-01-13得票数 3
，正如它在标题中所说的，我似乎不能使用钩子
我知道你们中的一些人会试图告诉我这是一个副本，但在我所见过的所有问题中，似乎没有人会问，使用导入的功能组件(我试图呈现的组件)的正确方式是什么。
import React from 'react';
import { hot } from 'react-hot-loader';
import Playground from '../playground/index';
class App extends React.Component {
render() {
Playground
浏览 2提问于2019-03-09得票数 0
回答已采纳
我必须在一个项目中做一些改变，我不太熟悉反应。如何从外部函数更改钩子的状态？这就是我所拥有的：
export const HomeView = () => {
[...]
const ProductDetails = () => {
const [number, setNumber] = React.useState(0);
const [currentPrice, setCurrentPrice] = React.useState(5);
React.useEffect(() => {
const fetchData = async () =>
浏览 3提问于2021-10-16得票数 0
回答已采纳
2回答
在下面的代码中，我创建了一个在其中使用useState的钩子，钩子完美地工作。然后，我创建了第二个自定义钩子，它内部使用useRef在控制台中打印html元素，后者无法工作，因为我不知道如何引用我正在创建的钩子中的元素。在这里，代码：
import "./styles.css";
import {useEffect, useRef, useState} from "react"
function useChangeText(){
const [n,setN]= useState(0)
const sum= ()=> setN(n + 1)
r
浏览 2提问于2022-07-18得票数 0
回答已采纳
我有(TypeScript)代码，如下所示：
export const DemoComponent = React.memo((props: DemoComponentProps) => {
const [state1, setState1] = React.useState<string | undefined>('');
const [state2, setState2] = React.useState<string | undefined>('');
const createF = (b: boole
浏览 2提问于2020-07-06得票数 0
回答已采纳
1回答
我必须在函数中调用分派(上下文，而不是Redux)，但我无法这样做。(Error: Invalid hook call. Hooks can only be called inside of the body of a function component.)
是否有办法在从组件调用的函数中运行钩子(或仅运行dispatch)？我可以使用Redux (store.dispatch(...))来完成这个任务，但是我不知道如何使用React来完成这个任务。
示例功能：
function someAction() {
const { dispatch } = React.useContext(S
浏览 3提问于2022-04-30得票数 1
回答已采纳
首先，我想表达对所有聪明的程序员的感谢。在更新了反应性路由器后，我面临着这个问题。在这里，我想提一件事，我是一个“类组件”的情人。
，但这是react.中的基本组件。
import React, { Fragment, Component } from 'react'
import axios from 'axios'
import { Col , Row} from 'react-bootstrap'
import { Link } from 'react-router-dom'
export default class Bl
浏览 4提问于2021-11-11得票数 1
您好，我正在尝试创建一个函数，当您单击产品页面上的添加到购物车时调用该函数。此函数位于一个单独的文件中，并被导入到产品页面中，名为onClick。但是，我收到这个错误，指出钩子调用无效。我做错了什么？
import {AuthContext} from '../context/auth'
import gql from 'graphql-tag'
import {Button} from 'semantic-ui-react'
import {useMutation} from '@apollo/react-hooks'
con
浏览 0提问于2021-04-03得票数 1
我正在尝试通过react-redux来使用暗模式和光模式的主题切换。
Color.js
import { useSelector } from 'react-redux';
const darkMode = {
primary: 'black',
secondary: 'white',
}
const lightMode = {
primary: 'white',
secondary: 'black',
}
function ColorMode(
浏览 1提问于2021-07-23得票数 1
我想知道在组件中使用useEffect钩子和自定义钩子有什么不同。 例如 如果我有一个功能组件( component )并在其中直接使用useEffect钩子 import React,{useEffect} from 'react';
function Component(){
useEffect(()=>{
//some code //callback fires after component renders
},)
return (<div>Component</div
浏览 21提问于2020-06-12得票数 3
回答已采纳
1回答
我知道函数不能调用钩子，只能响应功能组件，这有点不同。
我已经创建了一些需要使用钩子的实用程序/服务类型函数。
// somewhere in services files...
const utilNavTo = (route) => {
const navigate = useNavigate();
...
};
// somewhere in components for screens...
const MyScreen = () => {
...
if(something){
utilNavTo('/somewhere&#
浏览 10提问于2022-05-14得票数 1
回答已采纳
我正在尝试使用UseEffect react钩子，但收到错误: React hook "useEffect“在函数"cockpit”中被调用，该函数既不是React函数组件，也不是自定义React Hook函数 import React, { useEffect } from "react";
import styled from "styled-components";
import "./cockpit.css";
// it is a css code
const StyledButton = styled.button
浏览 35提问于2020-07-26得票数 0
回答已采纳
BlogDetailsPage.js
import { connect } from "react-redux";
import { useParams } from "react-router-dom";
const BlogDetailsPage = (props) => {
const { id } = useParams();
return <div>Blog Details: {}</div>;
};
const mapStateToProps = (state, props) => {
const
浏览 15提问于2022-05-22得票数 2
回答已采纳
具有如此简单的反应成分：
import React, { FunctionComponent, useEffect, useState } from 'react';
export function useMediaQuery(query:string) {
console.log("useMediaQuery")
useEffect(() => {
console.log("useEffect outer")
// ...
});
}
const Sidebar:
浏览 10提问于2022-02-10得票数 0
当项目被共享时，我想显示公司名称和所有者名称。
在这样做的过程中我得到了错误
“function.React钩子不能用于回调，必须在function函数组件或自定义function钩子函数中调用钩子”
下面是我的代码，
function Parent () {
const ownedItems = [{//someobject}];
const sharedItems = [{//someobject}];
const getCurrentItems() {
return ownedItems.concat(sharedItems);
}
浏览 2提问于2020-07-29得票数 0
回答已采纳
我已经检查了官方文档，并意识到我们不能在基于类的组件中直接使用钩子。所以，我尝试了一种特殊的方法，用基于类的组件来使用react钩子形式。
但这个案子也不适用于我的案子。
我的临时构成部分：
import React from "react";
import { useForm } from "react-hook-form"
export const ClassHookFormWrap = (Component) => {
const form = useForm();
console.log("form", form, C
浏览 11提问于2022-11-25得票数 -1
我可以使用类组件中的功能组件吗？我将调用从类组件中的函数组件中提取的函数。但它带来的错误如下所示。
未处理的拒绝(错误)：无效钩子调用。钩子只能在函数组件的主体内调用。这种情况可能发生的原因如下之一，
因此，我试图在functional中调用它，但在中，即使在functional中，我也得到了与在类组件中调用它时相同的错误。
功能部件
import React, { useEffect } from 'react';
import { UseWalletProvider, useWallet } from 'use-wallet';
import
浏览 30提问于2021-12-16得票数 2
回答已采纳
我正在我的反应应用中设置私有路由，这样只有经过身份验证的用户才能访问主页和配置文件页面，如果用户没有身份验证，那么他只能访问登录和注册页面。
为此，我调用了在privateRoute.js文件中创建的登录函数，而登录函数位于Login.js文件中。
现在，正如我所知道的，我可以将登录函数从Login.js文件传递给privateRoute.js文件作为支柱。现在，当我这样做并运行该功能时，我的登录函数就会进入一个无限循环，因为我的登录函数的一个条件在Login.js文件中变为真，并且它会运行和运行。
那么，如何防止该条件在Login.js文件中为真，然后在privateRoute.js文件中使
浏览 1提问于2022-01-02得票数 0
1回答
我正在尝试从自定义钩子中获取屏幕尺寸，但我不知道如何使用导入组件的结果。
显然，我可以使用{MyDims.Width}和{MyDims.Height}来显示结果，但是对于我的最后一个脚本，我需要使用这两个对象作为字符串，因此需要使用useState()。
下面是导入的组件: getdimensions.js
import React, {
useState,
useEffect
} from "react";
import {
Dimensions
} from "react-native";
function App(props) {
co
浏览 1提问于2020-08-15得票数 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
回答已采纳
2回答
目前，如何将React组件连接到redux存储有两个概念：和。我想知道使用钩子是否被认为是好的软件设计。
它损害了单一责任原则，因为组件不仅负责数据的呈现，而且还负责连接到存储。
组件和Redux之间存在紧密耦合。很难重用组件或从Redux切换到另一个状态管理解决方案。
在软件质量方面，钩子比connect()有什么优势吗？
浏览 3提问于2020-01-23得票数 12
回答已采纳
我在使用反应性路由器-dom V5，
在组件中，在呈现时，我必须显示一个按钮，该按钮将将我重定向到另一个组件布局：
我已经说过：
import React, { Component } from 'react';
import DashboardLayout from "../../views-layouts/DashboardLayout";
import { BrowserRouter , Switch ,Route , Link } from 'react-router-dom';
import { useHistory } from &#
浏览 2提问于2021-06-08得票数 0
回答已采纳
3回答
我试图使用按钮单击导航到另一个页面，但是如果说是can not read property push of undefined.，则会引发错误。
我对用于功能组件的history进行了一些研究。
如何在类组件中使用历史记录，或者如何使用其他方式(反应方式)来导航其他页面。
这是我的密码。
import React, { Component } from 'react';
class CentralBar extends Component {
constructor(props){
super(props)
this.state = {
浏览 5提问于2021-06-18得票数 1
回答已采纳
我是一个初学者使用(我已经使用了一段时间了)，我正在尝试在我的事件处理程序中使用自定义钩子。
但是，我收到这样的错误：
React Hook "useMyCustomHook" is called in function "onSubmit" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
这是我的代码：
import MyCustomHook from './myCustomHook';
浏览 2提问于2020-03-21得票数 1
回答已采纳
2回答
从另一个页面导入函数
、、、
单击按钮时，我需要从另一个页面调用函数resetToken()。resetToken()应该更改useState以生成新代码。我不知道如何将这个函数导入到另一个页面并使用它。
我有导入import Captcha from '../../../components/Captcha/Captcha';，并在return( ... )中用<Captcha/>显示
因此，当我单击按钮时，我需要调用函数resetToken()来生成新代码或再次调用导入，因为我在<Captcha/>中有
React.useEffect(() => {
浏览 5提问于2022-07-07得票数 0
回答已采纳
这里是我想要使用我的钩子，以便我可以改变一个状态在运行的应用程序。
export const simpleFunction = () => (state) => {
// here is the hook
}
我知道应在功能组件中使用react钩子，但上述情况如何。
浏览 1提问于2021-09-10得票数 0
回答已采纳
如何正确地编写React组件作为React 的函数
当我试图将组件编写为函数时：
"use strict"
function App() {
const [foo, setFoo] = React.useState()
const element = React.createElement()
return element
}
function appRender() {
const appContainerElement = document.getElementById('app-container')
cons
浏览 4提问于2021-07-14得票数 0
回答已采纳
我已经使用npx create-react-app创建了一个react应用程序。我正在使用React路由器来控制路由。我需要能够从我的props.location.search组件中访问Navbar。但是，由于Navbar不是Route的后代，所以location属性不会自动传递给Navbar。如何获得该属性并将其传递给Navbar中的App.js
// App.js
import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { Cont
浏览 3提问于2020-09-07得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
