react实现active
React 实现 active 状态的方法
在 React 中实现 active 状态可以通过多种方式完成，以下是几种常见的方法：
使用 useState 管理 active 状态
通过 useState 钩子来管理 active 状态，适用于需要动态切换 active 状态的场景。
import React, { useState } from 'react';
function Button() {
const [isActive, setIsActive] = useState(false);
return (
<button
className={isActive ? 'active' : ''}
onClick={() => setIsActive(!isActive)}
>
Click me
</button>
);
}使用 CSS 伪类实现 active 状态
对于简单的交互效果，可以直接使用 CSS 的 :active 伪类，无需 JavaScript。
button:active {
background-color: #007bff;
color: white;
}结合 classnames 库动态添加类名
当有多个类名需要动态切换时，可以使用 classnames 库来简化逻辑。
import React, { useState } from 'react';
import classNames from 'classnames';
function Button() {
const [isActive, setIsActive] = useState(false);
const buttonClasses = classNames('btn', {
'active': isActive
});
return (
<button
className={buttonClasses}
onClick={() => setIsActive(!isActive)}
>
Click me
</button>
);
}在列表项中实现 active 状态
对于列表中的 active 项，可以通过比较当前选中项与列表项的 ID 来实现。
import React, { useState } from 'react';
function List() {
const [activeId, setActiveId] = useState(null);
const items = ['Item 1', 'Item 2', 'Item 3'];
return (
<ul>
{items.map((item, index) => (
<li
key={index}
className={activeId === index ? 'active' : ''}
onClick={() => setActiveId(index)}
>
{item}
</li>
))}
</ul>
);
}使用 styled-components 实现 active 状态
通过 styled-components 可以更方便地管理组件的样式状态。
import React, { useState } from 'react';
import styled from 'styled-components';
const StyledButton = styled.button`
background: ${props => props.active ? '#007bff' : '#ccc'};
color: ${props => props.active ? 'white' : 'black'};
`;
function Button() {
const [isActive, setIsActive] = useState(false);
return (
<StyledButton
active={isActive}
onClick={() => setIsActive(!isActive)}
>
Click me
</StyledButton>
);
}以上方法可以根据具体需求选择适合的方式来实现 active 状态。
