React用太多的道具重构组件

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

我将扩展注释:

你要么想在拼贴组件中创建函数(而不是作为道具接收它们)

或有一个数组的图像发送到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