reactjs - 如何增加 Antd Collapse 图标大小并在折叠展开时更改它

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"
      />
    )}