More efficient way of writing multiple React components?

问题: I have a page where I render 8 components, the only thing different is an the values iterates... <Item classModifier="step" image={Step1} heading={Copy.one.headi...

问题:

I have a page where I render 8 components, the only thing different is an the values iterates...

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

The above works, but is there a more efficient way of writing this? I'm aware this probably doesn't adhere to DRY methodology!


回答1:

  1. Create an array containing your numbers in string format
  2. Create another array that will hold your Step1, Step2, ... variables
  3. Map those items into <Item> Components based on the current string and its index in the previously described array

You'll have something that looks like this

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>
);

Edit


回答2:

You could create an array and map over it returning the Components

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


The index used for the key prop is usually an anti-pattern although in this case where the array is manually build it should not pose any issues.
Also, I do not know more about where Step1 and Copy are coming and their format, so i just manually built the array. Perhaps the format you have allows you to directly map over some list and have access to that info.


回答3:

Without know exactly how the data is structured or if you can edit the structure, a common pattern is to use 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>
   )
}

回答4:

separate data and view. and render view by iterating data.

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}
    />
})
  • 发表于 2019-02-21 13:08
  • 阅读 ( 176 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除