【问题标题】：More efficient way of writing multiple React components?编写多个 React 组件的更有效方式？
【发布时间】：2019-07-13 23:56:10
【问题描述】：

我有一个渲染 8 个组件的页面，唯一不同的是值迭代...

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

以上方法可行，但有没有更有效的方法来写这个？我知道这可能不符合 DRY 方法！

【问题讨论】：

标签： javascript reactjs typescript ecmascript-6

【解决方案1】：

创建一个包含string 格式的数字的数组
创建另一个数组来保存您的Step1, Step2, ... 变量
Map 将这些项目放入 <Item> 组件中，这些组件基于前面描述的数组中的 current string 及其 index

你会有这样的东西

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

编辑

这要求您的两个数组按相同的顺序排序。否则将无法将步骤与其对应的编号匹配
为避免在数组中放置对象而不是原始字符串。 Check out Gabriele's answer for a more robust & maintainable implementation

【讨论】：

您可能应该将两个数组合二为一。拥有两个需要来匹配它们的顺序的数组不是一个好的模式。
是的，这就是正确的方法，即使这样可行。我包含了指向您的答案的链接，而不是编辑我的答案，因为那样它将与您的完全一样（您首先想到的）

【解决方案2】：

您可以创建一个数组并在其上映射返回组件

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

用于key 属性的索引通常是一种反模式，尽管在这种手动构建数组的情况下，它不会造成任何问题。
另外，我不知道更多关于Step1 和Copy 的位置及其格式，所以我只是手动构建了数组。也许您拥有的格式允许您直接映射某个列表并访问该信息。

【讨论】：

【解决方案3】：

如果不确切知道数据的结构或是否可以编辑结构，常见的模式是使用 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】：

分离数据和视图。并通过迭代数据来渲染视图。

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

【讨论】：