,可以通过以下步骤实现:
className={isActive ? "" : "link"}
。下面是一个示例代码:
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
isActive: false
};
}
handleClick = () => {
this.setState(prevState => ({
isActive: !prevState.isActive
}));
}
render() {
const { isActive } = this.state;
return (
<div>
<a
href="#"
className={isActive ? "" : "link"}
onClick={this.handleClick}
>
Link
</a>
</div>
);
}
}
export default MyComponent;
在上述示例中,当链接被点击时,会触发handleClick方法,该方法会通过setState改变isActive的值,从而实现链接的active和非active状态的切换。根据isActive的值,会动态添加或移除名为"link"的类。
请注意,上述示例中的className属性是基于React的方式来添加类名的,而不是直接操作DOM元素的classList。这是因为React采用了虚拟DOM的概念,直接操作DOM元素的类名可能会导致不必要的性能问题。
领取专属 10元无门槛券
手把手带您无忧上云