ReactJS中切换Item与ItemMultiple组件如何避免重复定义相同props

你可以通过动态指定渲染组件的方式，把重复的props逻辑合并，只需要写一次即可：

方案1：定义动态组件变量（最推荐，可读性最高） #

首先提前根据isMultiple的值选择要渲染的组件，再统一传参：

// 首字母必须大写，React才会识别为组件标签
const RenderItem = isMultiple ? ItemMultiple : Item;

{
  results && _.map(results, (itemData) => (
    <RenderItem
      key={itemData.key}
      data={itemData}
      loading={loading}
    />
  ))
}

方案2：使用React.createElement语法（无需额外定义变量） #

如果不想新增变量，也可以直接用React原生的createElement方法实现：

{
  results && _.map(results, (itemData) => React.createElement(
    isMultiple ? ItemMultiple : Item,
    {
      key: itemData.key,
      data: itemData,
      loading: loading
    }
  ))
}

进阶优化：聚合公共props #

如果后续公共props会持续增加，可以提前聚合props对象，维护更方便：

const RenderItem = isMultiple ? ItemMultiple : Item;

{
  results && _.map(results, (itemData) => {
    const commonProps = {
      key: itemData.key,
      data: itemData,
      loading,
      // 新增公共props直接在此处添加即可
    }
    return <RenderItem {...commonProps} />
  })
}

内容的提问来源于stack exchange，提问作者pmiranda