我有一个组件“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 和更多的泛化。有什么想法吗?
最佳答案
我将扩展评论:
您要么想在 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 使用相同的键
关于javascript - React Refactoring 组件有太多的 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69667875/