Passer le composant d'un objet JS comme props dans React

Question

Je lis un objet JS (à partir de JSX) et j'essaie de passer la valeur d'un composant mais elle est rendue sous forme de chaîne.

J'ai essayé de placer des composants (dans icon clé de data voir ci-dessous) dans {} mais cela ne sert à rien car data donne une erreur.

Voici la version simplifiée des fichiers.

data.js comme ci-dessous :

const data = [
 {
    title: "some title",
    desc: "some desc",
 },
 [
   {
     icon: "<TwitterIcon />",
     title: "title 1",
     desc: "desc 1",
   },
   {
     icon: "<FacebookIcon />",
     title: "title 2",
     desc: "desc 2",
   },
 ],
]

export { data }

index.js qui se lit comme suit data et le transmet en tant que props à AnotherComponent :

import { data } from "../path/to/data"
import AnotherComponent from "../path/to/AnotherComponent"

const Homepage = () => {

  return (
    <AnotherComponent {...data} />
  )
}

AnotherComponent.jsx comme ci-dessous :

import {TwitterIcon, FacebookIcon} from "../path/to/CustomIcons"

const AnotherComponent = ({ ...data}) => {

  return (
    {data[1].map(item => (
      <div>{item.icon}</div> // this prints string as opposed to rendering the component
      <div>{item.title}</div>
      <div>{item.desc}</div>
    ))}
  )
}

index.js retours :

<div><TwitterIcon /></div>
<div>title 1</div>
<div>desc 1</div>
<div><FacebookIcon /></div>
<div>title 2</div>
<div>desc 2</div>

Answer 1

Dans l'objet que vous définissez comme :

{
  icon: "<TwitterIcon />",
  title: "title 1",
  desc: "desc 1",
}

N'utilisez pas "<TwitterIcon />" Il retournera toujours une chaîne de caractères, utilisez plutôt TwitterIcon :

{
  icon: TwitterIcon,
  title: "title 1",
  desc: "desc 1",
}

Et enfin, appelez-le là où vous en avez besoin, de cette façon :

const AnotherComponent = ({ ...data}) => {

  return (
    {data[1].map(item => (
      <div><item.icon /></div> // HERE: check I'm calling item.icon as React Component
      <div>{item.title}</div>
      <div>{item.desc}</div>
    ))}
  )
}

De cette façon, vous transmettez l'icône à n'importe quel endroit et non pas une simple chaîne de caractères. Ainsi, vous pouvez l'appeler en tant que composant lorsque vous avez besoin qu'elle soit rendue. Je le fais souvent dans mon travail.

Answer 2

Je pense que vous devriez passer directement le composant de l'icône en l'objet comme ceci :

const data = [
{
    title: "some title",
    desc: "some desc",
 },
 [
   {
     icon: <TwitterIcon />,
     title: "title 1",
     desc: "desc 1",
   } ...

Ensuite, dans index.js vous pouvez faire (il est plus clair de transmettre des accessoires comme celui-ci) :

const Homepage = () => {
  return (
    <AnotherComponent data={data} />
  )
}

En AutreComposant.jsx maintenant vous pouvez le faire :

const AnotherComponent = ({data}) => {
  return (
    {data[1].map(item => (
      <div>{item.icon}</div>
      <div>{item.title}</div>
      <div>{item.desc}</div>
    ))}
  )
}