如何使圖標在反應中改變？

Question

我有手風琴組件，可以通過單擊標題更改 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

Answer 1

您可以有條件地渲染圖標，具體取決於isActive state：

{ isActive && <Icon name={activeIcon} /> }

{ !isActive && <Icon name={inactiveIcon} /> }

或立即：

{ isActive ? <Icon name={activeIcon} /> : <Icon name={inactiveIcon} /> }