如何增加和折叠图标的大小，并改变它，如果折叠展开

Question

我需要做两件事:

1. 需要增加默认图标箭头大小
2. 需要在面板展开时将图标更改为另一个。

我是这样做的:

<Collapse
expandIconPosition='right'
className='collapse-container'
// this works fine
expandIcon={({isActive}) => isActive
? <img src={closeCollapseIcon} />
: <img src={openCollapseIcon} />}
>
<Panel header='Question...' key='3'>
<p className='help-panel-text'>Some text</p>
</Panel>
</Collapse>

我的问题是:有没有一种更优雅的方式来做同样的事情?我的解决方案似乎太直接了。

Answer 1

您不需要呈现两个img标记，您可以使用一个标记实现相同的功能。更合适的方法是使用ant design

提供的Icon组件。

expandIcon={({ isActive }) => (
<Icon
component={isActive ? closeCollapseIcon : openCollapseIcon}
width="2em"
height="2em"
/>
)}