2
votes

Un moyen plus efficace d'écrire plusieurs composants React?

J'ai une page où je rend 8 composants, la seule chose différente est une itération des valeurs ...

<Item
  classModifier="step"
  image={Step1}
  heading={Copy.one.heading}
 />
 <Item
  classModifier="step"
  image={Step2}
  heading={Copy.two.heading}
 />
 <Item
  classModifier="step"
  image={Step3}
  heading={Copy.three.heading}
 />

Ce qui précède fonctionne, mais y a-t-il une manière plus efficace d'écrire ceci ? Je sais que cela n'adhère probablement pas à la méthodologie DRY!

javascript reactjs typescript ecmascript-6

0 commentaires

4 Réponses :

2
votes

Créez un tableau contenant vos nombres au format string
Créez un autre tableau qui contiendra vos Step1, Step2, ... variables convenient
Mapper ces éléments dans Composants basés sur la chaîne courante et son index dans le tableau précédemment décrit

Vous aurez quelque chose qui ressemble à ceci

const numbers = ['one', 'two', 'three'];
const steps = [Step1, Step2, Step3];     // These need to be defined before

return (
  <div>
    {numbers.map((s, i) => (
      <Item key={i} classModifier='step' image={steps[i]} heading={Copy[s].heading}>
    ))}
  </div>
);

Modifier

Cela nécessite que vos deux tableaux soient triés dans le même ordre. Sinon, il ne correspondra pas aux étapes avec leur numéro correspondant
Pour éviter cela, vous devez mettre des objets au lieu de chaînes brutes dans votre tableau. Découvrez la réponse de Gabriele pour un & mise en œuvre maintenable

2 commentaires

Vous devriez probablement combiner les deux tableaux en un seul. Avoir deux tableaux qui sont requis pour correspondre à leur ordre n’est pas un bon modèle.

Oui, c'est la bonne façon de le faire même si cela fonctionne. J'ai inclus un lien vers votre réponse au lieu de modifier la mienne car alors ce sera exactement comme le vôtre (auquel vous avez pensé en premier)

2
votes

Vous pouvez créer un tableau et le mapper dessus en renvoyant les composants

render(){
    const Items = [
      {step:Step1, heading: Copy.one.heading},
      {step:Step2, heading: Copy.two.heading},
      {step:Step3, heading: Copy.three.heading}
    ]

   
    return Items.map(({step, heading},index)=><Item 
      key={index}
      classModifier="step"
      image={step}
      heading={heading}
    />)
}

L'index utilisé pour l'accessoire key est généralement un anti-pattern bien que dans ce cas où le tableau est construit manuellement, il ne devrait pas poser de problème.
De plus, je ne sais pas plus d'où viennent Step1 et Copy et leur format, donc j'ai juste construit manuellement le tableau. Peut-être que le format que vous avez vous permet de mapper directement sur une liste et d'avoir accès à ces informations.

0 commentaires

0
votes

Sans savoir exactement comment les données sont structurées ou si vous pouvez modifier la structure, un modèle courant consiste à utiliser map ().

render(){
   const data = [
      {
         image: "a.jpg",
         heading: "A",
         key: 0
      }, 
      {
         image: "b.jpg",
         heading: "B",
         key: 1
      }
   ];
   const someComponents = data.map(d => (
      <Item key={d.key} classModifier="step" image={d.image} />
   ));
   return (
      <div>{someComponents}</div>
   )
}

0 commentaires

0
votes

séparez les données et les vues. et rendre la vue en itérant les données.

data = [
    { image: Step1, heading: Copy.one.heading },
    { image: Step2, heading: Copy.two.heading },
    { image: Step3, heading: Copy.three.heading },
]
data.map((obj, index) => {
    return <Item
        key={index}
        classModifier="step"
        image={obj.index}
        heading={obj.heading}
    />
})

0 commentaires