React Collage组件props冗余优化：多图点击事件通用实现问询

方案1：聚合单图属性，减少props数量 #

核心思路是把每张图片的资源信息和点击事件合并到同一个属性对象中，直接把原有的8个props压缩到4个，改造成本极低。

重构后的Collage组件代码 #

function Collage({ banner, square, portrait, poster }) {
   return (
       <View>
           <TouchableOpacity onPress={banner?.onPress}>
              <Image uri={banner?.uri} style={styles.banner} />
           </TouchableOpacity>
           <TouchableOpacity onPress={square?.onPress}>
              <Image uri={square?.uri} style={styles.square} />
           </TouchableOpacity>
           <TouchableOpacity onPress={portrait?.onPress}>
              <Image uri={portrait?.uri} style={styles.portrait} />
           </TouchableOpacity>
           <TouchableOpacity onPress={poster?.onPress}>
              <Image uri={poster?.uri} style={styles.poster} />
           </TouchableOpacity>
       </View>
   );
}

// 对应的PropTypes定义
Collage.propTypes = {
    banner: PropTypes.shape({
        uri: PropTypes.string.isRequired,
        onPress: PropTypes.func
    }),
    square: PropTypes.shape({
        uri: PropTypes.string.isRequired,
        onPress: PropTypes.func
    }),
    portrait: PropTypes.shape({
        uri: PropTypes.string.isRequired,
        onPress: PropTypes.func
    }),
    poster: PropTypes.shape({
        uri: PropTypes.string.isRequired,
        onPress: PropTypes.func
    }),
}

组件调用示例 #

<Collage 
    banner={{ uri: banner.uri, onPress: handleOnPressBanner }}
    square={{ uri: square.uri, onPress: handleOnPressSquare }}
    portrait={{ uri: portrait.uri, onPress: handleOnPressPortrait }}
    poster={{ uri: poster.uri, onPress: handleOnPressPoster }}
/>

方案2：配置数组驱动渲染，扩展性更强 #

如果后续可能新增图片类型、或者需要动态调整展示的图片，可以直接用配置数组统一渲染，组件不需要硬编码任何图片类型，通用度最高。

重构后的Collage组件代码 #

const collageStyleMap = {
  BANNER: styles.banner,
  SQUARE: styles.square,
  PORTRAIT: styles.portrait,
  POSTER: styles.poster
}

function Collage({ items }) {
   return (
       <View>
           {items.map((item, index) => (
               <TouchableOpacity 
                 key={index} 
                 onPress={item.onPress}
                 // 若需要固定位置顺序，可按type过滤渲染，无需依赖map的顺序
               >
                  <Image uri={item.uri} style={collageStyleMap[item.type]} />
               </TouchableOpacity>
           ))}
       </View>
   );
}

// 对应的PropTypes定义
Collage.propTypes = {
  items: PropTypes.arrayOf(PropTypes.shape({
    type: PropTypes.oneOf(['BANNER', 'SQUARE', 'PORTRAIT', 'POSTER']).isRequired,
    uri: PropTypes.string.isRequired,
    onPress: PropTypes.func
  })).isRequired
}

组件调用示例 #

const collageItems = [
  { type: 'BANNER', uri: banner.uri, onPress: handleOnPressBanner },
  { type: 'SQUARE', uri: square.uri, onPress: handleOnPressSquare },
  { type: 'PORTRAIT', uri: portrait.uri, onPress: handleOnPressPortrait },
  { type: 'POSTER', uri: poster.uri, onPress: handleOnPressPoster }
]

<Collage items={collageItems} />

方案选择建议 #

• 如果拼贴图布局固定，永远只有4种类型的图片，选方案1即可，改造成本最低，逻辑清晰。
• 如果后续有动态调整图片类型、数量的需求，选方案2，后续迭代不需要修改Collage组件本身，只需要传入对应配置即可。

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