Est-il possible d'ajouter du HTML à un appel de composant?

<ExpandCollapse
  previewHeight="250px"
  expandText="<span className="fal fa-arrow-down"></span>"
>

J'ai essayé différentes méthodes pour afficher <span className="fal fa-arrow-down"></span> sous forme d'icône. Est-ce possible dans le code ci-dessus?

0
brooksrelyt 2 mars 2020 à 21:33

2 réponses

C'est parce que vous passez une chaîne dans l'attribut expandText alors que vous devez passer un composant react. Créez un composant fonctionnel React avec le <span className="fal fa-arrow-down"></span> comme valeur de retour et changez le code en

<ExpandCollapse
  previewHeight="250px"
  expandText={<NewComponent />}
>
1
rbansal 2 mars 2020 à 18:41

Vous pouvez le passer en jsx et non en chaîne

<ExpandCollapse
  previewHeight="250px"
  expandText={<span className="fal fa-arrow-down"></span>}
>

Ou quelque chose comme

<ExpandCollapse
  previewHeight="250px"
  expandText={() => <span className="fal fa-arrow-down" />}
>

Ou extrayez-le en tant que composant, comme,

const Icon = () => <span className="fal fa-arrow-down" />

<ExpandCollapse
  previewHeight="250px"
  expandText={Icon} // But this depends on how you render it in ExpandCollapse
  expandText={<Icon />} // Or this..
>

1
iamcastelli 2 mars 2020 à 18:42