React Collapsible - 添加图标

Question

我正在使用React-Collapsible：

<Collapsible trigger="Fiche de référencement"  >
<h2>Hello world</h2>
</Collapsible >

我想在文字“Fichederéférencement”中添加一个图标，但我不知道该怎么做？ 你能帮助我吗 ？ 谢谢

Answer 1

你不会将图标传递给这件事。您可以做的是查看它返回的内容，https://github.com/glennflanagan/react-collapsible/blob/develop/src/Collapsible.js#L248

在任何情况下，这都由具有类Collapsible__trigger的span元素处理。有关它的信息可以在这里的示例中找到：https://github.com/glennflanagan/react-collapsible/blob/develop/example/_src/sass/components/_Collapsible.scss#L37

Answer 2

<可折叠触发器= {[Fiche deréférencement，<图标名称=“删除”]}>

你好世界

<Collapsible trigger="Fiche de référencement"  >
<h2>Hello world</h2>
</Collapsible >

Answer 3

这是一个例子-

import { BsChevronDown } from "react-icons/bs"; //react-icon
.
.
<Collapsible trigger={["Serial No.", <BsChevronDown />]}>
  <div/> //children
</Collapsible>

CSS-

.Collapsible__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Collapsible__trigger.is-open svg {
  transform: rotate(180deg);
}