我如何才能渲染侧面，仅在单击时，而不是使用React Hook useState？
要在React中实现仅在单击时渲染侧面的效果，而不使用useState Hook，你可以考虑以下几种方法：
方法一：使用类组件和生命周期方法
如果你在使用类组件，可以利用生命周期方法来控制侧面的渲染。
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showSide: false
};
}
handleClick = () => {
this.setState({ showSide: !this.state.showSide });
};
render() {
return (
<div>
<button onClick={this.handleClick}>Toggle Side</button>
{this.state.showSide && <div>侧面内容</div>}
</div>
);
}
}
export default App;方法二：使用函数组件和useRef
如果你坚持使用函数组件，但不想使用useState，可以使用useRef来控制侧面的渲染。
import React, { useRef } from 'react';
function App() {
const showSideRef = useRef(false);
const handleClick = () => {
showSideRef.current = !showSideRef.current;
};
return (
<div>
<button onClick={handleClick}>Toggle Side</button>
{showSideRef.current && <div>侧面内容</div>}
</div>
);
}
export default App;方法三：使用函数组件和useEffect
你也可以结合useEffect来实现类似的效果。
import React, { useEffect, useState } from 'react';
function App() {
const [showSide, setShowSide] = useState(false);
useEffect(() => {
// 这里可以添加一些副作用，比如数据获取等
}, [showSide]);
const handleClick = () => {
setShowSide(!showSide);
};
return (
<div>
<button onClick={handleClick}>Toggle Side</button>
{showSide && <div>侧面内容</div>}
</div>
);
}
export default App;总结
虽然你提到不想使用useState，但useState是React中管理组件状态的标准方式之一。如果你有特定的理由不想使用它，上述方法提供了几种替代方案。选择哪种方法取决于你的具体需求和偏好。
参考链接
希望这些信息对你有所帮助！
相关·内容
当我从父组件(Post)使用usePost hook调用setPost时，为什么这会导致无限的重新渲染器？是什么导致了这个错误？ function Post({ activePostId }) {
const { status, post, setPost, error, refetch } = usePost(activePostId)
const [savePost, savePostStatus] = useSavePost()
setPost('SetPost')
const onSubmit = async (values) => {
浏览 23提问于2021-05-08得票数 0
回答已采纳
我试图在我的功能组件中使用React useState钩子，但是我得到了这个错误：
Failed to compile
./src/Person/Person.js
Line 5:43: React Hook "useState" is called in function "person" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Search for the keywords to le
浏览 50提问于2019-11-22得票数 3
回答已采纳
假设我这样做
// Get a hook function
const {
useState,
useEffect
} = React;
const Example = ({
title
}) => {
const [formVal, setFormVal] = useState("")
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1)
// now use increment as just the cb for
浏览 1提问于2020-04-22得票数 2
我正在做一个小项目的最后一步，它使用一个高阶组件(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
使用功能组件构建我的ui。我的寄存器组件找不到import react, {useState} from 'react'，它返回给我这个错误。 Failed to compile.
./src/pages/Register.js
Line 10:31: React Hook "useState" is called in function "register"
which is neither a React function component or a custom React Hook function
react-hook
浏览 27提问于2020-10-26得票数 0
我正在使用回调钩子来停止渲染组件，这些组件在每个渲染中都是由于作为道具传递的函数的更改而更改的。在这里，我向incrementSalary和incrementAge添加了回调钩子。在这种情况下，回调钩子似乎工作得很好。但是，eslint会抛出以下错误： Line 10:76: React Hook useCallback has an unnecessary dependency: 'age'. Either exclude it or remove the dependency array react-hooks/exhaustive-deps
Line 15
浏览 133提问于2021-02-08得票数 0
声称，如果您将state Hook更新为与当前状态相同的值，React将在不渲染子对象或射击效果的情况下退出。
然而，在这个例子中似乎不是这样的：
function Child() {
useEffect(() => console.log("Re-render Child"));
return (<div>Child</div>);
}
export default function App() {
function Counter({ initialCount }) {
const [state, setState] =
浏览 38提问于2019-08-20得票数 3
回答已采纳
当用户单击react-Navigation5 headerRight中的“编辑”按钮时，我希望文本切换为“完成”，但似乎是导航选项。没有访问当前状态的权限。如何更新才能正常工作？
import React, {useState, useLayoutEffect} from 'react';
import { TouchableWithoutFeedback, View, Text } from 'react-native';
export default function ListScreen({navigation}){
const [editMode,
浏览 14提问于2020-06-08得票数 1
回答已采纳
import {useState} from 'react'
const nav = () => {
const [activeNav, setActiveNav] = useState('#')
}
我想建个导航吧。我搞错了，我不知道为什么
React Hook "useState" is called in function "nav" that is neither a React function component nor a custom React Hook function. React compone
浏览 7提问于2022-03-17得票数 1
1回答
我想限制连接到WS并经常获取数据的渲染组件，这会导致它经常重新渲染。我的解决方案是useMemo钩子，但是我不确定useMemo是不是为这种事情而设计的。可以肯定的是，每次更新data都会导致重新渲染，因为这就是useState的工作方式，而我必须更新这个data状态。您是否有一些建议或想法，如何限制<DataVisualizator />组件的重新渲染？ useInterval hook import { useEffect, useRef } from "react";
export const useInterval = (callback: () =&g
浏览 20提问于2021-10-08得票数 0
1回答
我在使用usestate()钩子进行状态操作后遇到问题。
无法编译错误：
./src/App.js
Line 6:43: React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Line 14:39: React Hook "useState" is called in functio
浏览 13提问于2020-03-05得票数 0
我正在使用钩子，但是我得到了这个错误
第25行:在既不是React函数组件也不是自定义React钩子函数的"contact“函数中调用React Hook "React.useState”第26行:在既不是React函数组件也不是自定义React钩子函数的"contact“函数中调用React Hook "React.useState”第27行:在既不是React函数组件也不是自定义React钩子函数的React Hook函数中调用react Hook "React.useState“
export default function contact()
浏览 2提问于2019-08-03得票数 1
我有按钮点击系统和它的工作。
function clickCreate(msg){
console.log(msg);
}
const CreateButton = (props) =>{
return(
<div>
<i onClick = {() => clickCreate("test")} id="createBtn" className="fas fa-5x fa-microphone-alt"></i>
</div>
);
}
现在，我
浏览 4提问于2021-01-09得票数 0
回答已采纳
我正在寻求关于我的方法的意见，利用钩子构建React树视图应用程序。
以下是使用useCallback、React.memo和useState的代码。请注意，同一时间只能打开一个一级项目，其余级别可能会同时打开多个项目。
Branch.js：
import React, { useState, useCallback} from 'react'
import Leaf from './Leaf'
const Branch = ({ items }) => {
const [expanded, setExpanded] = useState([])
浏览 2提问于2019-03-23得票数 1
我正在玩react钩子，并跟随https://www.valentinog.com/blog/hooks/的教程。我将空数组作为docs后面的第二个参数放入，但由于某种原因，我仍然得到一个无限循环。 import React, { useState, useEffect } from "react";
export default function useDataLoader() {
const [data, setData] = useState([]);
useEffect(() => {
fetch("http://api.icndb.co
浏览 20提问于2019-03-25得票数 0
回答已采纳
1回答
反应钩子形式渲染次数太多
、、、
我正试着做这样的事。当用户单击“编辑按钮”时，表单字段将出现，用户可以编辑数据。否则，用户只能查看数据。我面临麻烦，当用户不想编辑表单，点击取消按钮，然后页面开始呈现的次数，因为页面有总表单字段。
在我的原始表单上，我有80+表单字段，当用户单击“取消”按钮页面时，速度变得非常慢。
当我从页面中删除ref={寄存器}时，窗体不会多次呈现，但表单不会与数据一起提交。有没有办法停止额外的渲染？这是我的代码和逻辑。
感谢您的关注。
import React, { useState } from "react";
import { useForm } from "react-
浏览 4提问于2020-11-16得票数 0
我理解，useEffect需要依赖项数组中的依赖项，但是当我将其与useState结合时，将有一个无限循环：
const [valid, setValid] = useState(false);
useEffect(() => {
setValid(true);
}, [valid]};
这就是为什么我用它就像：
useEffect(() => {
setValid(true);
}, []};
因此，我得到：
React Hook useEffect has a missing dependency: 'setValid'.
我怎么才能摆脱警告呢？
浏览 4提问于2021-03-14得票数 0
回答已采纳
我的错误越来越严重了。太多的重新渲染。
我想做什么？
单击按钮时，调用开始函数并打开模式弹出。一旦开始功能完成，我必须关闭模式弹出。
下面是密码，
enum CheckStatus {
INITIAL,
STARTING,
STARTED,
FINISHED,
FAILED,
}
const useSomeHook = (id) => {
const [status, setStatus] = React.useState(CheckStatus.INITIAL);
const start = React.useCall
浏览 9提问于2021-12-31得票数 0
2回答
我的反应是新的。我创建了两个文件App.js和UseEffect.js，我正在学习如何使用函数的生命周期。所以当我在控制台中看到时，这是多次渲染。你可以在下面看到我的照片。
这是我的密码
UseEffect.js
import React, {useState, useEffect} from "react";
function MyFunction(){
console.log('-> Function Init')
const [count, setCount] = useState(0)
const handleCount = () =>
浏览 2提问于2022-07-15得票数 1
2回答
我正在尝试为一个内部项目创建一个视频预览，使用react钩子的"React & Typescript“下面是组件代码，
import React, { useEffect, useRef, useState } from 'react';
import { INewVideo } from 'src/models';
import { useForm } from 'react-hook-form';
const NewVideo: React.FC = () => {
const { register, han
浏览 3提问于2021-11-28得票数 0
2回答
在下面的代码中；根据我对useCallback hook的了解，“重新命名已经发生了！”只有当我在输入字段中输入某些内容时，才能显示消息，而不应该在单击按钮时打印消息。但是第二个案子的信息是打印出来的。为什么？
我的App.js文件
import {useState, useCallback} from 'react'
import List from './List'
function App() {
const [a, seta] = useState('')
const [Color, setColor] = useState(&
浏览 4提问于2022-07-23得票数 0
回答已采纳
import React, {useState, useEffect} from 'react';
import MakeCard from './MakeCard.js';
export default function GameCards(props) {
const [images, setImages] = useState([{}]);
// Render component after fetching images
useEffect(() => {
getImages(props.cards).then(imag
浏览 47提问于2021-03-24得票数 0
回答已采纳
3回答
使用这两种方法在React Hook中设置对象有什么不同吗？ const INITIAL_STATE = {
foo = '',
bar = ''
}
// ...
// Method 1
const [state, setState] = useState(INITIAL_STATE);
// Method 2
const [state, setState] = useState({ ...INITIAL_STATE }); 这两种方法都工作得很好，我只想知道使用其中一种方法是否有任何缺点或优点。
浏览 30提问于2019-07-02得票数 3
回答已采纳
我需要根据当前值更新React状态的当前值。但是，使用当前状态将触发警告：React Hook useEffect has a missing dependency。我怎样才能更新状态？
为了简单起见，假设我必须计算另一个状态更新的时间：
[myState, setMyState] = useState("");
[counter, setCounter] = useState(0);
useEffect(()=>{
setCounter(counter+1);
},[myState]) // React Hook useEffect has a missing de
浏览 3提问于2021-10-01得票数 0
回答已采纳
我试图从react路由器5迁移到反应性路由器6。我编写了一个简单的前端，只有点击登录按钮，你才能进入配置文件页面。在配置文件页面中有两个链接来查看配置文件和编辑配置文件。
//App.js
import './App.css';
import Header from './components/Header';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import Profile from '.
浏览 7提问于2022-09-12得票数 2
回答已采纳
我正在创建一个日历日期选择功能组件，用于为我的function应用程序中的日程分配天数，并且我希望能够使用现有的数据预先填充日历，以便用户可以修改它。
到目前为止，这就是我所拥有的：
const initialOptions: { [key: string]: number[] } = {};
for (const option of Object.keys(props.options)) {
const dates = props.options[option].dates;
initialOptions[option] = dates ? dates : [];
}
c
浏览 0提问于2019-08-15得票数 1
回答已采纳
1回答
我有以下使用React钩子的组件： import React, {useState} from 'react';
// import components
import TagManagementRow from './TagManagementRow';
const TagManagementList = (props) => {
const [tagData, setTagData] = useState(props.data);
const deleteAction = (id) => {
// Call to bac
浏览 35提问于2019-02-26得票数 2
回答已采纳
我想要在单击按钮时运行一些逻辑，并且想要更改该逻辑中的状态。到目前为止，react给了我一个对多个重新渲染的错误。到目前为止，以下是我的代码
const [current, setCurrent] = useState(0)
// const [theRest, theRest] = useState(false);
const next = (order, i) => {
let nextSlide = order + 1
setCurrent(nextSlide)
if (nextSlide > i) {
nextSlide =
浏览 16提问于2020-05-10得票数 0
回答已采纳
我只是尝试应用一个基本的自定义钩子，但它给出了一个错误，但它给出了一个错误，如下所示
React Hook "useState“在函数"usecount”中调用，该函数既不是React函数组件，也不是自定义React Hook函数。
import { useState } from 'react'
function usecount() {
const [count,setCount] = useState(0)
const increment = () =>{
setCount(prev => prev + 1)
}
const d
浏览 2提问于2021-07-24得票数 1
我是新加入ReactJS的。我试图建立一个备忘单(都在同一页)来学习基础知识。
我的Props.js和PropsList.js不能工作，我不明白这个错误信息。
PropList.js是Prop.js的孩子，Prop.js是App.js的孩子。
我只想用useState (作为初学者的一种简单的方式)在同一页上的基本课程( useState，useEffect，道具等)。)并有一个排序良好的文件。
如果您有任何建议/建议，请提前感谢。
App.js
import './App.css';
import OutputtingLists from './Components/
浏览 5提问于2021-08-06得票数 1
我正在构建一个React项目，该项目通过自定义钩子从API中检索数据，一旦数据被检索，它就会显示卡片，单击它们打开描述性页面。到现在为止一切都很好。
// App.js
<Routes>
<Route path="/" element={<Home />} /> // cards list
<Route path="/:eleId" element={<Details />} /> // description page
</Routes>
// Home.jsx with
浏览 1提问于2022-02-08得票数 2
回答已采纳
我想过滤数据并在搜索栏中实现。在Hook/index.js组件中，我在useEffects中获取和过滤数据。然后我在App.js传递道具。之后，我有了一个搜索栏组件，在这里我正在侦听输入，在这里它必须工作。我得到了未定义的。
Hook/index.js组件
import React, { useState, useEffect } from "react";
import "./hook.scss";
export default () => {
const [data, setData] = useState([]);
const [erro
浏览 2提问于2020-09-10得票数 0
在我的React应用程序中，我将在单个组件中多次实现useState。然后，在我的useEffect中，我将更改其中几个的状态： import React, { useState, useEffect } from 'react';
const Projects = React.memo(function (props) {
const [someState1, setSomeState1] = useState(false);
const [someState2, setSomeState2] = useState(false);
const [
浏览 50提问于2020-04-15得票数 2
回答已采纳
错误：
React Hook "useState" is called in function "createFlight" that is
neither a React function component nor a custom React Hook function.
React component names must start with an uppercase letter react-
hooks/rules-of-hooks
我的代码：
import React, {Component} from 'react'
浏览 1提问于2021-11-27得票数 0
这是我的代码。我想在列表的顶部添加一个新的费用项目。我希望得到一些帮助，告诉我如何在列表的顶端创建新的费用。我一直得到相同的错误:太多的重新渲染。React限制渲染的次数，以防止无限循环。我该如何解决这个问题呢？
import React, { useState } from "react";
import { Text, View, ScrollView } from "react-native";
import NewExpense from "../NewExpense";
import {
selectTitle,
selectP
浏览 1提问于2021-09-06得票数 0
1回答
假设我有一个自定义钩子，我将使用它将单击事件侦听器添加到HTML元素中。
我用const buttonRef = useRef(null);创建ref，因此第一次呈现时的值为null。ref值仅在呈现方法的最后一个位置分配，此时我的自定义钩子已经被调用。
因此，在第一次呈现时，我的自定义钩子没有任何可以添加事件侦听器的内容。
最后，我必须更新组件，然后才能第二次运行自定义钩子，最后将事件侦听器添加到元素中。我得到了以下行为：
问题：
怎么才能避开这一切？我真的需要强制更新我的组件才能将一个参考文件发送到自定义钩子中吗？由于我只能在顶层(钩子的规则)调用钩子和自定义钩子，所以下面这样
浏览 0提问于2019-05-14得票数 11
回答已采纳
2回答
反应高阶函数返回钩子
、、、、
目前，我有一个用javascript编写的自定义抓取数据钩子，它可以正常工作
import {useState, useEffect} from 'react';
const useApi = apiName => id => {
const [response, setResponse] = useState();
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
const fetching = async () =&
浏览 2提问于2020-05-07得票数 1
我已经创建了一个组件，App，基于状态挂钩useState的。这是我的代码：
import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
console.log("before");
const [count, setCount] = useState(0);
console.log("after");
return (
<d
浏览 2提问于2020-10-14得票数 1
回答已采纳
正如我在下面展示的，react子渲染每次它的父渲染时都会渲染。这是为什么，这是一个问题吗？另外，我怎样才能避免它，以致于只有当它的优点改变时，子对象才会重新渲染。 import React, {useEffect, useState} from 'react';
function App() {
return (
<div>
<Main></Main>
</div>
);
}
export default App;
function Main() {
const [count
浏览 38提问于2020-04-29得票数 1
我已经精疲力竭地试图获得这张图片中确切设计的功能，我不知道如何导入/渲染第二张图片中显示的这些可重用的SVG图标，而不必从本地文件导入每个单独的图标路径！
请提供任何形式的帮助或支持，我们将不胜感激
import React, { useEffect, useState } from "react";
function Icon({ name, ...otherProps }) {
/* Use state hook to store icon module value */
const [iconModule, setIconModule] = useStat
浏览 1提问于2021-09-11得票数 0
1回答
我有一个使用react-router的React应用程序。我的路由的简约版本如下：
<Router>
<div className="App">
<Sidebar />
<div className="app-container">
<Switch>
<Route path="/" exact render={Home} />
<Route path="/logs" e
浏览 4提问于2020-09-29得票数 1
2回答
我试图将react-hook-form添加到reactstrap表单和输入中，但看起来包之间存在冲突。
import React, { useState, useEffect } from 'react';
import { useForm } from "react-hook-form";
import {
Button,
Form,
Label,
Input
} from 'reactstrap';
import { FormControlLabel, Checkbox, FormGroup } from &#
浏览 2提问于2021-03-11得票数 0
回答已采纳
我使用带有<select>的react-hook-form来检测select中的更改，但是在填充select之后，该手表最初的值是错误的。 下面是一些代码来说明这个问题： import React, { useState, useEffect } from 'react';
import { useForm } from "react-hook-form";
function App() {
const { register, watch } = useForm();
const watchFoo = watch("foo"
浏览 31提问于2021-10-14得票数 0
回答已采纳
我使用lib React Hook表单作为带有复选框输入的表单。我不明白这段代码有什么问题。这段代码重新呈现一个带有依赖项的useEffect。当仅尝试呈现单个复选框输入时，不会验证此行为。有人有一个想法，使用一个地图函数来渲染多个输入，而不需要重新渲染？
我用下面的代码创建了一个沙箱
浏览 8提问于2021-02-23得票数 1
有人能给出这个警告信息的解决方案吗？
137:7警告“slider1”数组使useEffect Hook (第143行)的依赖项在每次呈现上发生变化。为了解决这个问题，将'slider1‘的初始化包装在它自己的useMemo() Hook react钩子/详尽-deps 138:7中，警告'slider2’数组使useEffect Hook (第143行)的依赖项在每次呈现上发生变化。要解决这个问题，请将'slider2‘的初始化封装在它自己的useMemo() Hook react钩子/详尽-deps中。
我是个新手，对此没有经验。如果有人能提供完整的解决方案，那
浏览 2提问于2021-10-14得票数 9
回答已采纳
以下是我的代码 import React, { FC, useState,useMemo } from "react";
const FormSearch: FC<{ params: string }> = ({
params
}) => {
const [category, useCategory] = useState<string>("All");
const [search, setSearch] = useState<string>("");
useMemo(() =&g
浏览 31提问于2019-06-07得票数 7
1回答
在下面的程序中，当我单击任何按钮时，另一个按钮也会重新呈现，即使我已经使用了React.memo()。此外，只有其他按钮得到重新呈现，而不是其他计数。为什么？我有这样一个父组件：
import React, { useState } from 'react'
import Count from './Count'
import Button from './Button'
import Title from './Title'
function ParentComponent() {
const [age, setAge
浏览 2提问于2021-01-25得票数 1
2回答
我编写了一个简单的React来测试React如何呈现
import ReactDOM from 'react-dom';
import React, { useState, useEffect } from 'react';
const App = (props) => {
// State
const [trackIndex, setTrackIndex] = useState(1);
const [trackProgress, setTrackProgress] = useState(0);
const clickHandler =
浏览 7提问于2021-11-24得票数 0
2回答
我没有在TypeScript中使用React Hook，但我有几行代码，如下所示：
const [columns] = React.useState<Column[]>([
{ name: 'product', title: 'Product' },
{ name: 'region', title: 'Region' },
{ name: 'amount', title: 'Sale Amount' },
{ name: 'saleDate'
浏览 14提问于2020-05-20得票数 0
回答已采纳
1回答
钩子useFetch改进机四次
、、、、
Reactjs v17，axios，react-路由器-dom v6.
钩子useFetchAndLoad执行4次渲染。
我知道有两种呈现，第一种是加载组件，然后是useEffect。但另外两个人呢？然后我读到让<React.StrictMode>渲染它四次。删除StricMode，但它仍然呈现4次。
我想我有它:加载组件、useEffect、response.data、setLoading(false)。这里有4幅渲染图。这是对的？
问:渲染四次可以吗？
import axios from "axios";
import { useEffect,
浏览 5提问于2022-03-31得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
