[英]How to make the icon changed in react?
I have accordion componennt that changes the state by clicking on the title.我有手风琴组件,可以通过单击标题更改 state。 I would like to add to it a funcionality that when I click on it icon gets changed only on the,,title" div. I have added inactiveIcon and activeIcon props, but have no idea how to make it changed only within this tile div and when the component gets expanded. I know the styling is poor so far, but I would like to finish functionality first. ALso, for this reason, I am attaching photos from storybook.
我想给它添加一个功能,当我点击它时,图标只会在标题“div 上发生变化。我添加了 inactiveIcon 和 activeIcon 道具,但不知道如何让它只在这个 tile div 和当组件展开时。我知道到目前为止样式很差,但我想先完成功能。此外,由于这个原因,我附上了故事书中的照片。
The basic idea is that after clicking and when the,,Link to" gets expanded the icon in the title should change.基本思想是,单击后,当“链接到”展开时,标题中的图标应该改变。
Appreciate your help.感谢你的帮助。
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
You can render icons conditionally, depending on the isActive
state:您可以有条件地渲染图标,具体取决于
isActive
state:
{ isActive && <Icon name={activeIcon} /> }
{ !isActive && <Icon name={inactiveIcon} /> }
or at once:或立即:
{ isActive ? <Icon name={activeIcon} /> : <Icon name={inactiveIcon} /> }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.