为什么我的React应用程序菜单在我只更改状态而不使用任何CSS时打开？
React应用程序的菜单在只更改状态而不使用任何CSS时打开的原因可能是由于React的组件重新渲染机制。
当React组件的状态发生变化时，React会重新渲染该组件及其子组件。在重新渲染过程中，React会对组件进行diff算法比较，找出需要更新的部分，并将其更新到DOM中。
如果菜单的打开状态是通过React组件的状态来控制的，当状态发生变化时，React会重新渲染菜单组件。在重新渲染过程中，如果没有正确处理组件的状态变化，可能会导致菜单在状态变化时意外地打开。
解决这个问题的方法是在组件的状态变化时，正确地更新菜单的样式。可以通过在组件的render方法中根据状态来动态添加或移除CSS类名，从而控制菜单的打开或关闭状态。
另外，也可以使用React的条件渲染功能，根据状态来决定是否渲染菜单组件，从而避免不必要的重新渲染。
总结起来，菜单在只更改状态而不使用任何CSS时打开的原因是由于React的重新渲染机制导致的。正确处理组件的状态变化，并根据状态来更新菜单的样式，可以解决这个问题。
相关·内容
1回答
在刷新时在重定向时响应导航组件丢失数据
reactjs
我使用的是React 16.4.1和React路由器-Dom 4.3.1。我已经构建了一个侧栏反应组件，使用一个web组件，您将数据传递到web组件中，这将呈现该组件。
这是侧栏组件。
import React from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';
import { Redirect } from 'react-router-dom';
class Sidebar extends React.Comp
浏览 0提问于2018-09-20得票数 2
回答已采纳
1回答
使用钩子使用新数组更新状态
arrays、reactjs、react-hooks、react-functional-component、react-state
我在一个像这样的反应功能组件中有一个数组的状态-
const [columns, setColumns] = React.useState<[]>([])
我希望在某个时候更新整个数组(而不是更新推送/删除某些元素的特定元素)。我可以简单地做setColumns(newArray)吗？这样做后，我的reason组件就会因为某种原因而进入一个无限循环。请帮帮忙。
浏览 4提问于2022-04-04得票数 0
2回答
reactJS render()方法中未定义属性值
javascript、reactjs
我正在尝试构建一个简单的react类，它在呈现时根据从其父组件接收的props中的图像路径返回一个标题和一个图像。
每次我尝试访问属性this.props.eImage (本地图像路径)时，该属性的值都是未定义的，就像前两次渲染的eImage: undefined一样(组件因未知原因渲染了4次)。我有权访问该属性，但由于某些原因无法访问其价值。
这会导致render方法抛出错误“找不到模块‘未定义’。
我尝试使用生命周期方法，如getDerivedState和component willRecieveProps，首先将图像路径存储在状态中，然后在渲染中使用它，但无济于事，两者都有相同的结果。
浏览 0提问于2020-08-30得票数 1
1回答
基本上相同的代码，但一个导致无限循环的使用效果。
javascript、reactjs
对不起，reactjs初学者，下面有两个代码，我不明白为什么当我使用“第一段代码”时，我得到无限循环(在浏览器控制台中无限注销'123‘)，当我使用“第二个代码”时，我没有无限循环(在浏览器控制台中只注销两个'123’)，为什么当我用“第一个代码”获得无限循环时，为什么不使用“第二个代码”来获得无限循环呢？
(第一段代码)导致无限循环：
[Parent.js]
const randomFunc = (dataFromChildComponent) => {
setData(dataFromChildComponent);
};
[Child.js]
useEffec
浏览 2提问于2021-07-31得票数 0
回答已采纳
1回答
如何在父状态更改时停止子组件重新呈现？
reactjs、typescript、use-state、console.log
我在App.tsx中有App.tsx文本框。当我从父组件更改Textfield状态时，子组件textfield.tsx中存在textfield代码，其子组件呈现400次
我希望控制台中的hi只打印1时间而不是400。我怎样才能解决这个问题？
示例代码：
App.ts
import { useState } from "react";
import MyTextField from "./components/textField.tsx/textField";
function App() {
const [state, setState] = useSt
浏览 10提问于2022-05-26得票数 0
回答已采纳
2回答
如何从renderItem获得FlatList的高度？
reactjs、react-native
我的目标是获取renderItem函数为<FlatList />组件使用的<FlatList />的高度，并将其用于renderItem中的<Image />组件。
const renderItem = () => {
let height;
return
<View onLayout={event => {height = event.nativeElement.layout.height}}>
<Image style={{width: height}]/> // I wish to us
浏览 4提问于2021-02-13得票数 0
回答已采纳
1回答
防止在onChange输入时从子组件呈现
reactjs、typescript、rendering
我一直在尝试通过阻止下面示例中的容器组件在每次子组件更新时重新呈现来优化应用程序。当UsersList组件的输入发生变化时，如何预渲染EditableRow组件？谢谢。链接代码：https://stackblitz.com/edit/react-ts-llwq51?file=EditableRow.tsx
浏览 17提问于2021-10-22得票数 1
2回答
React组件未在window.location更改时重新呈现
javascript、reactjs、redux、react-redux、react-router
所以，我有一个用于主菜单的react组件。
它是指向不同页面react-router <Link/>的列表。每个链接都会检查window.location.path以确定它是否是活动页面，以便活动菜单项可以以不同的方式呈现。
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import List from "@material-ui/
浏览 0提问于2018-09-25得票数 2
2回答
响应两次调用的useState处理程序
reactjs
有这样一个简单的反应应用程序：
import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
console.log("App")
const [inputValue, setInputValue] = useState(0);
return (
<>
<input
浏览 5提问于2022-05-05得票数 1
1回答
Webpack 3 webpack-dev-server热重装不起作用
javascript、reactjs、webpack
我知道这已经被问了很多次了，但我似乎无法找到正确的组合调整，以使这个工作。
一切都在建立，一切都在运转。Webpack的建筑产量甚至表明热插拔是可行的。当我更改一个组件时，当我重新加载页面时，它会重新构建successfully...but什么都不会改变：
Version: webpack 3.10.0
Time: 359ms
Asset Size Chunks Chunk Names
main.dist.js 5.7 MB 0 [emitted] [big] main
main.dist.css 151
浏览 1提问于2018-01-02得票数 1
1回答
为什么从我的React应用程序中的函数获得多个控制台日志输出？
javascript、reactjs、react-hooks、promise、console.log
我在我的function应用程序中创建了这个函数来获取一个url并检查状态。
import { useEffect, useState } from 'react';
const fetchStatusCode = (url: string) => {
const [data, setData] = useState<string | null>(null);
useEffect(() => {
const fetchStatus = async () => {
const response = await fetc
浏览 5提问于2022-11-02得票数 -2
1回答
使用无国家的反应
javascript、dom、optimization、reactjs、state
我正在构建一个应用程序的UI，我正在探索更新UI，而不必使用State。下面的说法是否大致正确？
‘我们不需要状态，因为它的所有操作都是在状态中的某个东西发生变化时自动调用组件上的呈现方法，我们可以通过自己对相关组件调用呈现方法来实现相同的实现。
我们仍然可以实现所有相同的React (虚拟DOM、渲染、绘图优化等)‘
浏览 1提问于2016-01-11得票数 4
回答已采纳
1回答
React图形组件不会在useEffect中出现的url更改上重新呈现。
javascript、reactjs、react-native、react-hooks、axios
我正在制作一个交互式的图表，当你选择不同的日期时，它会重新呈现。过去，在我做一些基本更改之前，它会重新呈现很好的效果(将state responsibilites移动到组件，而不是app.js。当我更改日期时，它似乎确实更改了负责进行api调用的组件中的url。然而，即使是在一个useEffect中，它也没有重新呈现，而且它以前也进行了重新呈现。
我是新来的，所以这可能是很明显的事情。我也不确定这是否是正确的方法，所以我对改进我的应用程序或最佳实践的任何指针都是开放的。
App.js:最好是删除app.js中的useGetData和useURLSwitcher，但是没有它们它就无法在启动时加载
浏览 8提问于2022-04-06得票数 0
1回答
React hooks -在useEffect中设置超时，但能够将其从鼠标事件中清除？
javascript、reactjs、react-hooks、timeout
这是一个经典的菜单案例，单击一个按钮即可打开，如果没有活动，则在5秒内隐藏。我们有两个状态变量。打开和激活，对应于两种不同的状态=菜单打开，激活(正在使用)。我使用按钮单击来设置open变量，然后实际上我启动了5秒超时。现在，如果用户将鼠标移到菜单上，我将active属性设置为true，并尝试清除超时。但这是行不通的。这意味着，在应该清除超时变量的代码中，超时变量始终为空。 下面是一些代码，可以帮助您理解： let [open, openMenu] = useState(false)
let [active, activateMenu] = useState(false)
let time
浏览 30提问于2020-10-21得票数 2
回答已采纳
1回答
这个错误重要吗？元件不受控制
javascript、reactjs、redux
实际上，我更喜欢这种设计，因为它允许我轻松地使用react状态或redux状态重用组件。但我收到警告了。你建议我做什么？
警告:组件正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制的转换为受控的(反之亦然)。决定在组件的生存期内使用受控输入元素还是不受控制的输入元素。更多信息:输入(由InventoryDisplay创建)在InventoryDisplay中(由连接( InventoryDisplay)创建)在连接(InventoryDisplay)中在PersistGate中
import React from 'react'
import {co
浏览 0提问于2018-05-22得票数 1
1回答
防止子组件在带有备注的上下文提供程序下重新呈现
reactjs、react-native、memoization、context-api
我正在使用React中的上下文提供程序来跨多个组件共享数据。但是，由于值从我的一个子组件更改，它会重新呈现我的所有其他组件，这在一定程度上会导致性能问题。所以我想防止我的子组件被重新渲染。我尝试使用React.memo()，但每当我设置上下文提供程序的状态时，它仍然在呈现。 const Authenticator = React.memo(() => {
const [myChat, setMyChat] = useContext(ChatContext);
console.log("rerender"); // gets called everytim
浏览 15提问于2021-01-05得票数 4
3回答
动态更新导航栏购物车数量
reactjs、react-bootstrap
我正在使用React，Typescript，React-bootstrap和一个自制的API创建一个webshop。在导航栏中，我希望动态显示用户购物车中的产品数量(如果购物车中有2个产品，则显示Cart(2) )。现在，我正在使用useEffect从我的API中获取购物车中的产品数量，但当然，useEffect只在页面重新呈现时触发-这意味着当我添加或删除产品时，它不会反映在购物车中(？)数。
我的导航栏是一个(功能)组件，而我的产品选择也是单独的功能组件
如何实现导航栏购物车中的数字(？)将产品添加到购物车时进行更新。
下面是导航栏中的完整代码。
提前感谢！
import Navbar f
浏览 0提问于2021-06-02得票数 0
2回答
如果一个无状态组件的属性没有改变，它会重新呈现吗？
reactjs
我从React学到的一件事是，如果组件的道具没有改变，那么React就不会费心重新渲染组件。对于无状态组件也是这样吗？或者它们的行为更像是“愚蠢的”函数，并且每次都会被执行？
例如，如果我有：
import StatelessComponent from '../StatelessComponent';
export default class DocumentsTable extends React.Component {
state = {
something: 'foobar',
};
render() {
return (
浏览 1提问于2017-10-14得票数 51
回答已采纳
1回答
为什么这里用的是React.useCallback，而不是普通函数？
reactjs、fluent-ui、fluentui-react
我正在查看中的一个示例
...
export const TextFieldControlledExample: React.FunctionComponent = () => {
const [firstTextFieldValue, setFirstTextFieldValue] = React.useState('');
...
const onChangeFirstTextFieldValue = React.useCallback(
(event: React.FormEvent<HTMLInputElement | HTMLTextA
浏览 11提问于2021-03-02得票数 1
2回答
使用forceUpdate()手动更新DOM并呈现React组件
reactjs、dom
我有一个非常简单的应用程序，它有一个包装了两个子组件的组件。它还包含一个强制重新渲染的按钮。
const Hello = () => <span id="hello">hello</span>;
const World = () => <span id="world">world</span>;
class HelloWorld extends React.Component {
render() {
return (
<div id="hello-world&#
浏览 0提问于2018-07-06得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
