使用React Hooks动态更新颜色？
React Hooks是React 16.8版本引入的一种新特性，它可以让我们在无需编写类组件的情况下，在函数组件中使用状态和其他React特性。使用React Hooks动态更新颜色的步骤如下：
- 首先，引入React和useState钩子函数：
import React, { useState } from 'react';- 在函数组件中使用useState钩子函数来创建一个状态变量和更新该变量的函数：
const [color, setColor] = useState('red');这里我们创建了一个名为color的状态变量，并使用setColor函数来更新该变量的值。初始值为'red'。
- 在组件中使用color变量来设置样式或进行其他操作：
return (
<div style={{ backgroundColor: color }}>
<button onClick={() => setColor('blue')}>Change to Blue</button>
<button onClick={() => setColor('green')}>Change to Green</button>
</div>
);这里我们将color变量作为背景颜色的值，并在按钮的点击事件中使用setColor函数来更新color的值。
完整的示例代码如下：
import React, { useState } from 'react';
const ColorChanger = () => {
const [color, setColor] = useState('red');
return (
<div style={{ backgroundColor: color }}>
<button onClick={() => setColor('blue')}>Change to Blue</button>
<button onClick={() => setColor('green')}>Change to Green</button>
</div>
);
};
export default ColorChanger;这样，当点击按钮时，背景颜色会动态更新为蓝色或绿色。
推荐的腾讯云相关产品：腾讯云函数（云函数是一种无服务器的执行环境，可以让您无需管理服务器即可运行代码），腾讯云云开发（云开发是一套完整的后端云服务，提供了云函数、数据库、存储等功能，可帮助开发者快速构建全栈应用）。
腾讯云函数产品介绍链接地址：https://cloud.tencent.com/product/scf
腾讯云云开发产品介绍链接地址：https://cloud.tencent.com/product/tcb
相关·内容
我使用的是VSCode，当我将行'react-hooks/exhaustive-deps': 'warn'添加到我的.eslintrc.js中时，会在ESLint输出中得到以下内容：
Rules with suggestions must set the `meta.hasSuggestions` property to `true`. Occurred while linting
C:\Users\filepath.jsx:72 Rule: "react-hooks/exhaustive-deps"
这就破坏了所有其他的皮毛。我尝试在我的.es
浏览 4提问于2021-10-15得票数 37
回答已采纳
我希望根据用户单击的内容动态呈现组件。我试过这样的方法：
function ComponentTest() {
const [component, setComponent] = useState<ReactNode | null>(null);
return <button onClick={() => setComponent(SomeFunctionalComponent)}>Crash</button>
}
在本例中，我显然没有对状态做任何事情，但是单击此按钮会导致应用程序崩溃，产生以下错误消息：
Warning: Do n
浏览 7提问于2022-04-12得票数 0
回答已采纳
我是React的新手，我正在尝试将React钩子集成到我遵循的React课程使用的一些项目中。此示例应添加一个输入字段，用于设置页面的背景颜色。当我加载页面时，在1秒后，我得到以下错误 src\App.js
Line 16:43: React Hook "useBackgroundColor" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hook
浏览 273提问于2020-10-30得票数 0
回答已采纳
React组件(Viewer)包含一个动态元素列表(Element)。元素的大小取决于当前的屏幕分辨率。
<Viewer
elements={[{
uid: '1',
title: 'project 1'
}, {
uid: '2',
title: 'project 2'
}, {
uid: '3',
title: 'project 3'
}, {
浏览 0提问于2019-11-16得票数 2
2回答
我最近在package.json中更改了react和react的版本(我升级了)，现在我得到了下面的错误。
×
←→1 of 18 errors on the page
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (su
浏览 2提问于2022-03-22得票数 1
我正在创建一个简单的表，它从json收集数据并在表中显示信息。
在表格中，我也有一个高亮的背景，为超过100分的人。还有一个按钮来改变颜色。
我已经包装了颜色变化作为上下文提供者。
当我的表呈现时，我会在控制台中得到这个错误消息。
react-dom.development.js:51 Warning: React has detected a change in the order of Hooks called by Table. This will lead to bugs and errors if not fixed. For more information, read the R
浏览 4提问于2022-02-10得票数 1
回答已采纳
1回答
我试图使用在基于用户输入的功能响应中创建全局钩子，但是遇到了以下错误：
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breakin
浏览 11提问于2022-10-24得票数 0
回答已采纳
我有一个包含以下规则的.eslintrc文件：
"rules": {
"prettier/prettier": "error",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "error",
"no-console": "warn"
},
我安装了：eslint-plugin-prettier，eslint-config-pr
浏览 10提问于2022-02-10得票数 3
2回答
我有一个问题，原因是ESLINT输出控制台中的一个错误。我想解决控制台中的问题。请检查这里的代码框
更新问题
The 'callbackFunction' function makes the dependencies of useEffect Hook (at line 33) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'callbackFunction' in its own useCallback
浏览 20提问于2021-04-13得票数 13
回答已采纳
我正在使用react 16.8和eslint - .When -react- hooks 1.6.0插件，我有条件地使用钩子，我希望eslint会警告我。下面是我的配置：
"eslintConfig": {
"parser": "babel-eslint",
"plugins": [
"react-hooks"
],
"rules": {
"react-hooks/rules-of-hooks": "error"
浏览 0提问于2019-04-28得票数 15
我正在创建一个日历日期选择功能组件，用于为我的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
回答已采纳
我正在尝试将一个React项目中的一些Firebase代码更新到Firebase最近发布的中。正在升级的项目使用钩子useCollectionData()，它在切换到新的sdk时失败。当我尝试运行我的移植代码时，我在我的控制台中得到以下错误输出3次。
index.esm.js:101 Uncaught :v1.isequate不是一个函数
一个使用web v8代码的最小示例：
import firebase from 'firebase/app'
import 'firebase/firestore'
import { useCollectionData
浏览 7提问于2021-09-19得票数 5
回答已采纳
我真的很困惑，因为我正在学习使用钩子，我正在处理useState钩子，当我无意中发现这一点时，当我输入输入时，onClick函数就会被触发。
这是代码：
import React, {useState} from 'react'
function Hooks() {
const [count, setInput] = useState("");
return (
<React.Fragment>
<input value={count} onChange={(e) => {setInput(e.target.
浏览 3提问于2020-07-20得票数 0
回答已采纳
1回答
Webpack模块联合会动态导入
、、、、
你好，我希望你能帮助我，拯救我的日子！我正在尝试公开组件并在主机应用程序中动态加载它们。当我用文本加载诸如div这样的哑组件时，一切都很好，但是当我尝试加载带有钩子的组件时，就会出现一个错误：
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React
浏览 12提问于2022-07-21得票数 0
我使用的是react-navigation，并且有一个动态的头文件，所以我使用了setParams并将其放在标题中。
const MyComponent = ({navigation}) => {
useEffect(() => {
const { setParams, state } = navigation
const { params = {} } = state
const { description } = params
setParams({ headerTitle: description })
浏览 1提问于2019-07-13得票数 9
我有一个现有的TypeScript React项目，它是在Hooks存在之前创建的，我正在尝试使用Hooks重写所有的类。
因此，在我的package.json "devDependencies"中，我将typescript react的版本从7.0.6更改为@types/react-redux": "7.1.16"。我原以为我希望在"dependencies"中得到完全相同的react版本，但似乎react-redux没有7.1.16，只有7.1和7.2。我选择了7.2，这似乎很管用。
更广泛地说，我想知道如果我在开发和生产依赖之间使用
浏览 5提问于2021-01-26得票数 2
1回答
我希望实现一个由基本字段(例如:产品名称、价格和类型)组成的表单，然后根据所选类型实现特定类型的字段。
最初，解决方案似乎很简单()，因为我设法根据在当前product状态中找到的类型呈现不同的组件。
但是，由于这些组件是在内部使用钩子(如useEffect )时有条件地呈现的，所以当我从一种产品类型更改为另一种产品类型时，它们会破坏并导致以下错误：
Should have a queue. This is likely a bug in React. Please file an issue.
Warning: React has detected a change in the orde
浏览 3提问于2022-08-09得票数 0
在点击一个按钮时，我们如何使用react hooks和url创建一个具有以下字段的动态表单url，全局有效时间仅为48小时。 https://localhost/aB123GHedFGH138HGxYz/recommendform import React, { useState, useEffect, useRef } from "react";
import "./styles.css";
export default function App() {
// nominee text field
// description
浏览 5提问于2021-05-02得票数 0
回答已采纳
这是我的app.js文件。这里似乎一切都很好，我不相信这里有什么需要改变的，因为当我简单地输入url时，路由工作得很好。 import React, { Component }from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter, Switch } from "react-router-dom";
// Layouts
import Header from '../components/layouts/Header';
imp
浏览 14提问于2020-10-28得票数 0
回答已采纳
我在让React Fabric UI DetailsList与React Hooks一起工作时遇到了问题。它会呈现，但选择部分不会。每当您选择一行时，我希望选择的计数会被更新。然而，我没有看到这一点。看起来选择组件项永远不会更新，即使UI显示它被选中。我还看到当您选择一行时，onSelectionChange会被触发。现在确定是因为我使用了react钩子还是什么
我采用了提供的类示例，它是有效的：
[Codepen]https://codepen.io/pen/?&editable=true (Example)
与原始版本相同，但被剥离了
[Codepen]https://codepe
浏览 0提问于2019-07-26得票数 2
我是否正确地说，不可能使用 eslint插件与tslint？
我尝试将它添加到我的tslint.json中：
"plugins": ["react-hooks"],
"rules: {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
但是，我在控制台中看到了以下错误：
Could not find implementations for the following rules
浏览 0提问于2019-02-23得票数 2
回答已采纳
我有一个具有LinearGradient背景和TouchableOpacity(Backgroundcolor构建的按钮是白色的反应本地应用程序)和文本
我试图设置类似于LinearGradient背景色的文本颜色，因此当滚动时，文本颜色将根据LinearGradient背景色动态变化。
我已经尝试将TouchableOpacity文本的颜色设置为透明，但是由于是白色的，所以文本颜色也变成了白色
我有一个想法，得到的ScrollView Y，并创建一个函数，将输出不同的LinearGradient颜色时，但这可能需要一些工作。除了这个还有更简单的方法吗？
import React from &
浏览 0提问于2019-08-03得票数 0
我知道我可以禁用该文件或禁用该行，但我现在想要全局地这样做，这样我就不必在每次想要使用useEffect作为componentDidMount()时都写入它。 我试过了： {
"plugins": [
// ...
"react-hooks"
],
"rules": {
// ...
"react-hooks/rules-of-hooks": "off"/0, // tried each
"react-hooks/exhaustive-deps"
浏览 369提问于2020-09-20得票数 4
在这个项目中，我使用react传单来显示由GEOJSON特性对象生成的地图。我只是去一个动态的乡村路线，当点击每个国家层。
const geoJsonRef = useRef();
useEffect(()=>{
geoJsonRef.current.getLayers().map((layer)=>{
layer.on({
click : ()=>{
useNavigate( 'go/to/country' ); // here is the error occurs
浏览 5提问于2021-12-10得票数 1
回答已采纳
我试图将函数setDir和handleSort()从SearchAppointments (父级)传递到Hooks(子级)，但我一直收到错误，说它们不是函数。 我试图通过在子组件的useEffect钩子中查找typeof handleSort来调试它，尽管它定义了两个语句: 1)未定义的函数2) console.logged。不确定出了什么问题。 const SearchAppointments = React.memo(() => {
const [orderDir, setDir] = useState("");
const handleSort = (e
浏览 15提问于2020-06-21得票数 0
回答已采纳
2回答
如何调用类组件中的钩子？
、、、
技术使用的
反应本土化的外观，打字稿和复配。
问题
我试图将我定制的主题颜色传递到一个类组件中。我还理解不能在类组件中使用/调用钩子，而只能在函数组件中调用钩子。我使用类组件的原因是因为Redux重匹配。有什么方法可以让我从下面列出的钩子中获取颜色到我的类组件中吗？
这就是我如何建立我的主题：
index.tsx
const palette = {
colourTextDark: "#ffffff",
colourTextLight: "#000000",
};
export const colors = {
colourText: palette.c
浏览 1提问于2020-10-04得票数 0
回答已采纳
1回答
只是学习事物的钩面与反应。类组件是有意义的，但是Hooks缺少呈现部分。
如果我要向网页添加React (而不是应用程序)，我如何让钩子知道在HTML页面上运行的位置？
我试图在下面的代码中放置代码：<script src="react-hooks.js"></script>
这是我的钩子代码：
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
浏览 1提问于2020-03-22得票数 3
回答已采纳
以下是我的代码 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
我在react function组件中有一个搜索状态。 const [search, setSearch] = React.useState({
orgName: "",
repoName: ""
}); 因此，当用户提交表单时。我需要从搜索对象中获取数据。我所做的是： const handleSearch = (e) => {
e.preventDefault();
const {loading, data, error} = useQuery(SEARCH_REPO, {
浏览 33提问于2020-03-30得票数 1
回答已采纳
我现在有点卡住了。下面您将找到一段代码，用于从函数更新redux存储中的一些数据。这样就行了，一切都好。
const handleCBLabelText = (position: string, text: string) => {
dispatch({
type: 'CB_LABEL_TEXT_ADD_FOR_POSITION',
cbLabelStation: position,
cbLabelText: text
})
setTimeout(() => {
dispatch
浏览 5提问于2022-06-21得票数 0
回答已采纳
React 16.9
我知道这个class component state
class JustAnotherCounter extends Component {
state = {
count: 0
};
等于使用Hooks useState。
function JustAnotherCounter() {
const [count, setCount] = useState(0);
..but --以下使用Hooks useState的类组件状态的等效值是什么？
class Main extends Component {
state = {
浏览 5提问于2020-05-25得票数 3
回答已采纳
我是react的初学者。我正在尝试使用react-hooks将数据库的值从一个文件发送到另一个文件，并得到以下错误，有人能帮助我吗？
第5:41行:不能在顶层调用React Hook "useState“。React Hooks必须在React函数组件或自定义React Hook函数react-hooks/rules-of-hooks代码中调用：
import React, {useState, useEffect} from "react";
import Axios from "axios";
const [collegeList, setcol
浏览 47提问于2021-05-18得票数 0
在react 17中不一定使用
import React from 'react';
但是如果我没有它，所以eslint给了我错误
'React' must be in scope when using JSX react/react-in-jsx-scope
你知道如何修改.eslintrc.js吗？
module.exports = {
parser: "babel-eslint",
env: {
browser: true,
node: true,
es6: true,
jest: true,
}
浏览 1提问于2020-11-02得票数 20
回答已采纳
我是React Hooks的初学者，我在React中有一个功能组件： import React, {useState} from 'react'
const myFunction() {
const [myValue, setValue] = useState(10000)
function currencyFormat(num) {
return parseFloat(num).toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}
handleChange = (e) =>
浏览 3提问于2020-04-24得票数 0
我试图获得react-hooks规则，但它似乎不适用于我的设置(VSCode，CRA，airbnb，tslint，更漂亮)。
这是我的.eslintrc.json在崩溃前的情况：
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": ["plugin:react/recommended", "airbnb", "prettier"],
"g
浏览 0提问于2020-04-29得票数 0
回答已采纳
1回答
我有一个子组件，它通过一个事件向父组件发出一个操作：
子组件：
export default function ChildComponent(props) {
const classes = useStyles();
const [value, setValue] = React.useState([0, 5]);
const handleChange = (_, newValue) => {
setValue(newValue);
props.updateData(newValue)
};
return (
<div classNa
浏览 1提问于2020-11-14得票数 3
回答已采纳
1回答
我在使用ApexChartJs作为我的react项目，但是当我试图从我的防火墙数据库中获取动态数据时，然后向我展示undefined。
下面是我的项目代码的一部分：
import React, { useEffect, useState } from "react";
import Chart from "react-apexcharts";
import { auth, db } from "./firebase";
import { useCollection } from "react-firebase-hooks/fir
浏览 6提问于2021-08-23得票数 2
回答已采纳
我正在使用react与Parcel & TypeScript。我正在尝试使用ESLint，但我得到了以下错误：
ESLint:初始化错误(ESLint)。Module.createRequire不是一个函数。
版本：
IDE:网络风暴
节点版本: 16.6.2
国家预防机制版本: 7.20.3
我的机器上没有安装ESLint
这是我的设计：
package.json：
{
"name": "app-boilerplate",
"version": "1.0.0",
"descri
浏览 14提问于2022-01-21得票数 20
2回答
我正在尝试使用React Hooks更新状态。我有一个对象数组，在一个对象中是我试图更新的另一个数组。所有这些都是动态生成的。
[
{
"question": 2,
"choices": ["Heart Disease", "GERD", "ASTMA"]
},
{
"question": 4,
"choices": ["Heart Disease", "GERD", "A
浏览 1提问于2020-04-15得票数 1
**错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React和呈现器(例如renderer )的不匹配版本
你可能违反了Hooks的规则
，您可能在同一个应用程序中有多个React副本**
从“react”导入React，{useState，useEffect}；
从“react redux”导入{ useDispatch }；从“../../features/userSlice”导入{ selectUser，注销}；从“=>”导入{ CustomSidebarMenu = (props) =>{ const = useSelector
浏览 5提问于2021-05-28得票数 1
当我把它放在我的.eslintrc.json中时，“redux/useSelector-偏好-选择器”的规则没有得到遵守，但是其他的规则是。但是，当我
/* eslint react-redux/useSelector-prefer-selectors: "off" */
在违规文件的顶部，错误会消失。
我的.eslintrc.json文件(在根目录中)：
{
"env": {
"browser": true,
"commonjs": true,
"es2020": true,
浏览 6提问于2022-02-11得票数 0
回答已采纳
嗨，开发人员，我只是React.js的初学者。我试着把道具从父母传给孩子。
这是app.js文件
import React from "react";
import Hooks from "./components/ReactHooks1";
import Hooks2 from "./components/ReactHooks2";
const App = () => {
return (
<div>
<h1>
浏览 10提问于2022-05-13得票数 2
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 Hooks将SVG结构的颜色从红色更改为白色，再将白色更改为红色。问题是，几秒钟后，颜色开始快速变化，而不是每秒一次。我不明白我在代码中哪里出错了。 这是useState。 const[rectColor, rectColorSet] = useState('red') 以及用于更改颜色的useEffect。 useEffect(() => {
if(rectColor === 'red'){
let timer = setInterval(() => {
rectColor
浏览 34提问于2020-10-31得票数 1
回答已采纳
我试图使工作搜索输入。我通过Hooks/useCountries组件中的useEffect中的获取数据进行过滤，在App.js中监听输入，并在搜索栏组件中传递handleChange的道具。有东西不见了，我不知道是什么。
下面是Hooks/useCountries和组件的链接
import React, { useState, useEffect } from "react";
export default function useCountries(search) {
const [data, setData] = useState([]);
const [erro
浏览 4提问于2020-09-11得票数 0
我正在一个更大的反应项目的背景下研究一些优化算法。在测试某些内容时，我遇到了以下React行为:即使是最简单的React组件，最初也总是呈现两次。我想知道为什么。
下面是演示此行为的源代码：
App.tsx
import React from 'react';
import './App.css';
import Test1 from './components/Test1';
function App() {
return <Test1 />;
}
export default App;
Test1.tsx
import R
浏览 3提问于2022-07-20得票数 3
您好，我正在动态地尝试在react-hooks概念中设置输入值，但我遇到了一个错误。有没有人可以帮我： 代码： import React,{useState} from 'react';
function ObjectHook() {
var [names,setName]=useState({fname:'',lname:''});
let UpdateData = (event) =>{
setName({...names,[event.target.name]:event.target.value}
浏览 11提问于2019-12-21得票数 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
1回答
我正在尝试让它，当我点击我在下面动态创建的元素，它们将改变颜色。 handleBuild() {
const from = parseInt(document.getElementById("from").value);
const to = parseInt(document.getElementById("to").value);
let newSquares = [];
for (let i = from; i <= to; i = i + 0.5) {
if (i.toString().includ
浏览 20提问于2020-09-24得票数 0
1回答
我有一个Frontity项目(React)，是我从Github那里撤回的。
当我从windows终端(powershell)中的命令npx frontity dev开始时，它启动了服务器，一切都如愿以偿。但是，当我在VSC终端(powershell和终端)中尝试相同的过程时，我会得到以下错误：
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might
浏览 3提问于2022-02-26得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
