javascript - React Refactoring 组件有太多的 Prop

Question

我有一个组件“Collage”，它呈现 4 种类型的图像:BANNER、SQUARE、PORTRAIT 和 POSTER。

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

Collage.propTypes = {
    banner: PropTypes.shape({
        uri: PropTypes.string.isRequired
    }),
    square: PropTypes.shape({
        uri: PropTypes.string.isRequired
    }),
    portrait: PropTypes.shape({
        uri: PropTypes.string.isRequired
    }),
    poster: PropTypes.shape({
        uri: PropTypes.string.isRequired
    }),
}

现在，我想添加在按下拼贴图像时执行某些操作(每个图像不同)的功能。

类似于:

 <Collage 
    banner={banner}
    onPressBanner={handleOnPressBanner}
    square={square}
    onPressSquare={handleOnPressSquare}
    portrait={portrait}
    onPressPortrait={handleOnPressPortrait}
    poster={poster}
    onPressPoster={handleOnPressPoster}
 />


 ...

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

           ... repeat for others
       </View>
   );
}

在我看来，这似乎是不专业的代码，并且可能有一种方法可以使其更简单，使用更少的 Prop 和更多的泛化。有什么想法吗？

Answer 1

我将扩展评论:

您要么想在 Collage 组件中创建函数(而不是将它们作为 props 接收)

或者将一组图像发送到 View 组件。像这样的东西:

function Collage({ images }) {
   return (
       <View>
           images.map(image => (
             <Image key={`collage-image-${image.type}`} uri={image.uri} style={styles[image.type]} onClick={image.onClick} />
           )
       </View>
   );
}

其中 images 是一个数组，每个数组元素包含一个 uri、一个类型(在您的例子中应该是 banner、square、portrait、poster 之一)和一个点击处理程序。

警告:如果您在同一个页面上有多个拼贴画，您可能需要发送一些额外的 Prop 以确保您不会有两个 child 使用相同的键