React Refactoring 组件有太多的道具

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

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

Answer 1

我会延长评论：

您要么想在 Collage 组件中创建函数（而不是将它们作为道具接收）

或者将图像数组发送到 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 之一）和一个点击处理程序。

警告：如果您在同一页面上有多个拼贴画，您可能需要发送一些额外的道具以确保您不会two children with the same key

React Refactoring 组件有太多的道具

React Refactoring component with too many props

javascript

refactoring

reactjs

react-native