如何在React中动态更改组件的className？
在React中动态更改组件的className可以通过以下几种方式实现：
- 使用state来控制className：在组件的state中定义一个变量，根据需要的条件设置不同的className，然后在组件的render方法中使用该变量作为className的值。当state发生变化时，React会自动重新渲染组件并更新className。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isActive: false
};
}
handleClick = () => {
this.setState(prevState => ({
isActive: !prevState.isActive
}));
}
render() {
const { isActive } = this.state;
const className = isActive ? 'active' : 'inactive';
return (
<div className={className}>
<button onClick={this.handleClick}>Toggle</button>
</div>
);
}
}- 使用条件表达式来动态设置className：在组件的render方法中使用条件表达式来判断需要应用的className，并将其作为className的值。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isActive: false
};
}
handleClick = () => {
this.setState(prevState => ({
isActive: !prevState.isActive
}));
}
render() {
const { isActive } = this.state;
return (
<div className={isActive ? 'active' : 'inactive'}>
<button onClick={this.handleClick}>Toggle</button>
</div>
);
}
}- 使用classnames库来动态设置className：classnames是一个常用的第三方库，可以方便地根据条件动态设置className。首先安装classnames库，然后在组件中引入并使用它。
import classNames from 'classnames';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isActive: false
};
}
handleClick = () => {
this.setState(prevState => ({
isActive: !prevState.isActive
}));
}
render() {
const { isActive } = this.state;
const className = classNames({
active: isActive,
inactive: !isActive
});
return (
<div className={className}>
<button onClick={this.handleClick}>Toggle</button>
</div>
);
}
}以上是在React中动态更改组件的className的几种常见方法。根据具体的需求和项目情况，选择适合的方式来实现动态className的变化。
相关·内容
1回答
我正在使用react和React Router创建一个应用程序，我从React开始。我有这样一个父类： /*any logic..*/ /**
浏览 9提问于2017-01-19得票数 0
我是新的反应，但希望有人能帮忙！ { song: 'Song Name',
lenght，因为我不知道如何使‘prop’..map值动态化。本质上，我不知道如何在.map之前更改</em
浏览 2提问于2022-08-31得票数 0
1回答
从效率的角度考虑，是否可以只重新呈现组件的render方法的一部分？class Cmponent extends React.Component{
return(}
假设我想动态显示.div3。例如，使用带开关的状态标志s
浏览 5提问于2021-01-21得票数 0
回答已采纳
我想做一个按钮检查，这将添加一个新的calssName到我的列表。我使用一个函数来更新状态并获取字符串。如果你想帮助我更具体，因为我是一个初学者。谢谢！使用'on‘时，我将字符串添加到id中。}) else { id: on, })} 以及如何显示列表和如何检查与字符串的对应关系return(
<div className='display'&g
浏览 69提问于2021-03-28得票数 0
回答已采纳
1回答
我正在尝试渲染一个反应组件。组件的第一部分将保持不变，但是第二部分需要根据从道具返回的数据进行动态更改。有什么办法把这些连在一起吗？import * as Icon from 'react-cryptocoins';
render() {return (
<div className="component-result-
浏览 0提问于2018-02-28得票数 2
回答已采纳
我有一个变量，它会根据条件为true或false动态分配一个React组件。if(isValid) {icon = <ErrorIcon className: "error"/>}
else {icon = <SuccessIcon className: "success"/>如何在单元测试中测试一个或另一个组件的图标的期望值？
浏览 5提问于2019-03-28得票数 1
回答已采纳
2回答
我在父组件中有数组，需要在从api中读取一些JSON后动态更新。我正在使用react路由器，我可以将数组传递给子组件，并根据数组值添加一个css类，但我似乎不知道如何正确地更新我的数组并将panelone的数组值更改为off。父组件：import { Route, NavLink, HashRo
浏览 2提问于2019-03-19得票数 0
回答已采纳
2回答
我想在单击BlackSpark时呈现RedSpark，但我不确定如何更改另一个组件中组件的状态。我知道如何在组件本身中设置状态，但是当我单击另一个组件时，如何影响另一个组件呢？class BlackSpark extends React.Component { return (
<div className
浏览 4提问于2017-07-03得票数 1
回答已采纳
是否有一种方法允许在下面的data-*组件上使用类型记录动态属性？我希望能够：interface ITestProps: string;export const Test: React.FunctionComponent<
ITestProps & HTMLAttributes<HTMLDi
浏览 5提问于2020-09-10得票数 3
我已经动态创建了功能组件实例，如何在一个特定实例上更改状态？说第三个，把“老鼠”改成“老鼠”？如果我用AS3这样做，我会把实例放在一个数组中，然后能够从数组索引中对它们进行寻址，那么用React是如何做到的呢？const display_set = ["cat","dog","rat","bat"];
return
浏览 0提问于2021-07-15得票数 0
2回答
我一直在学习creation路由器，当我试图实现一个基于获取api调用的片段的动态页面创建时，遇到了一些问题。基本上，在用户单击链接后，我尝试将用户重定向到一个新页面--这个新页面将是一个新的组件，我将在这个组件上进行一个新的api调用，其中slug作为我的搜索参数。
但是，我很难根据弹格动态地更改页面。下面是一个组件(BoxScore.js)，在该组件中，我进行
浏览 2提问于2022-03-31得票数 1
回答已采纳
我已经创建了一个web应用程序(使用React Js)，它使用 npm包在播放器中显示youtube视频。传递给此组件的‘'props’= { youtubeVideoId, streetSound, playbackSpeed }import React from'react';imp
浏览 24提问于2020-05-28得票数 1
1回答
我很难将动态事件附加到我的反应组件上。<li className="selector" > <h2 className( {this.nodes}
&l
浏览 0提问于2013-12-20得票数 5
回答已采纳
有没有一种本机方法可以在不使用jQuery或任何第三方库的情况下向作为属性传递的react元素添加样式类名。下面的示例应该演示我正在尝试做的事情。注意，react类名是由组成的。编辑:重点是修改作为属性传递给Books类的react元素的类名！Books类需要修改类名。显然，它无法访问在Authors类中使用的Authors类的状态。
浏览 11提问于2022-09-03得票数 0
6回答
我正在尝试使用react i18Next来翻译我的应用程序。我知道如何将它与简单的const组件一起使用，但不会在类中使用。 </Provider> }现在，在基于const的组件中使用它非常容易如何在类
浏览 10提问于2019-02-19得票数 26
回答已采纳
我有一个简单的react组件，它必须在用户要求时从服务器加载数据。问题是我不知道如何在组件加载状态之前传递动态变量speakerUrl并访问它。路由器组件- SpeakerPage
import React from 'react'
浏览 5提问于2016-12-07得票数 6
回答已采纳
3回答
我有一个没有高度属性的容器(高度和填充它的内容一样大)，并且我正在更改容器中的文本内容，这最终改变了高度。我正试图弄清楚，当高度发生变化时，我如何在容器上放置一个过渡。我无法在容器上初始化一个高度，因为this.state.text将是动态的，它将要更改的文本也将是动态的。当前的代码显示，当容器的高度发生变化时，不会发生任何转换。以下是组
浏览 10提问于2020-04-16得票数 1
回答已采纳
3回答
变更反应父组件状态
、、、、
它还有一个简单的结构:每个部分都有一个组件：
该函数应该“更改”Contact us组件的状态(简单的contact us表单)：该组件具有以下代码：
浏览 0提问于2019-01-27得票数 0
我正在为我的肚脐制作一个小的滴答动画，但是由于某种原因，当我点击一个NavLink时，它不会移动。起初，我认为这是CSS文件的一个问题，但这似乎很好。然后，我尝试使用一个较早版本的反应性路由器-多姆，但这似乎也不起作用。如果能提供一些帮助，我们将不胜感激。如您所见，“Active -nav”类应该更改为任何活动的NavLink &其余的类将保留空引号。/navbar.css"
const Navbar = () =>
浏览 12提问于2022-10-19得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
