我有一個組件“拼貼”，它呈現 4 種型別的影像：橫幅、方形、肖像和海報。
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>
);
}
在我看來，這似乎是不專業的代碼，并且可能有一種方法可以使它更簡單，更少的道具和更多的泛化。有任何想法嗎？
uj5u.com熱心網友回復：
我將擴展評論：
您要么想在 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>
);
}
其中影像是一個陣列，每個陣列元素包含一個 uri、一個型別（banner, square, portrait, poster在您的情況下應該是其中之一）和一個點擊處理程式。
警告：如果您在同一頁面上有多個拼貼畫，您可能需要發送一些額外的道具以確保您不會有two children with the same key
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/330762.html
標籤：javascript 反应 反应原生 重构