![](/img/trans.png)
[英]React - How to make react-icon rotate 180 degrees onClick?
[英]How to make the icon changed in react?
我有手风琴组件,可以通过单击标题更改 state。 我想给它添加一个功能,当我点击它时,图标只会在标题“div 上发生变化。我添加了 inactiveIcon 和 activeIcon 道具,但不知道如何让它只在这个 tile div 和当组件展开时。我知道到目前为止样式很差,但我想先完成功能。此外,由于这个原因,我附上了故事书中的照片。
基本思想是,单击后,当“链接到”展开时,标题中的图标应该改变。
感谢你的帮助。
import { string, node, oneOf } from "prop-types"
import * as Styled from "./Container.styled"
import Icon from "design-system/components/icon"
import React, { useState } from 'react';
const Container = ({ size, children, as, inactiveIcon, activeIcon, text, }) => {
const [isActive, setIsActive] = useState(false);
return (
<Styled.Container size={size} as={as}>
<Styled.Title onClick={() => setIsActive(!isActive)}>
{text}
{activeIcon && (
<Icon name={activeIcon}/>
)}
</Styled.Title>
{isActive &&
<Styled.Content >
{children}
</Styled.Content>}
</Styled.Container>
);
}
Container.propTypes = {
text: string.isRequired,
size: oneOf(["small", "medium", "large"]),
children: node.isRequired,
as: oneOf(["section", "article", "div"]),
activeIcon: string,
inactiveIcon: string,
name: string,
}
Container.defaultProps = {
size: "large",
as: "div",
activeIcon: null,
inactiveIcon: string,
name: null,
}
export default Container
您可以有条件地渲染图标,具体取决于isActive
state:
{ isActive && <Icon name={activeIcon} /> }
{ !isActive && <Icon name={inactiveIcon} /> }
或立即:
{ isActive ? <Icon name={activeIcon} /> : <Icon name={inactiveIcon} /> }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.