Best practice for making reusable generic component
I've got two different variants of cards, their widths are slightly different and one contains a button at the bottom while the other doesn't, but their height, font family/size and overall look is similar.
I decided to make a generic Card
component. But ended up with a monstrosity of prop overloading(? dont know the proper term), where the Card
component contains many different configurations that become difficult to maintain.
What is a better approach? In terms of 1. Should I even create a generic Card
component that is reusable and 2. If I should make a generic reusable component is there a more maintainable way to do so?
type Props = {
onPress?: () => void;
label: string;
subLabel: any;
textBoxLayout: string;
Button?: any;
cardProportions: string;
buttonProps?: object;
imgSrc: URL;
};
const Card = (props: Props) => {
return (
<TouchableOpacity
onPress={props.onPress ? props.onPress : () => false}
style={tw`${props.cardProportions} bg-white rounded-xl overflow-hidden mr-5`}
>
<RestaurantImg imgSrc={props.imgSrc} />
{/* Get rid of this additional div */}
<View style={tw`flex-1`}>
<View style={tw`${props.textBoxLayout}`}>
<View style={tw`justify-evenly`}>
<Text style={tw`font-primary-bold text-sm`}>{props.label}</Text>
<Text style={tw`text-1xs`}>{props.subLabel}</Text>
</View>
{props.Button ? (
<props.Button buttonProps={props.buttonProps} />
) : null}
</View>
</View>
</TouchableOpacity>
);
};
RestaurantCard
(which consumes Card
开发者_StackOverflow)
type Props = {
restaurantName: string;
joined: boolean;
imgSrc: URL
};
const RestaurantCard = (props: Props) => {
const navigation = useNavigation();
return (
<Card
imgSrc={props.imgSrc}
onPress={() =>
navigation.navigate("Home", {
screen: "RestaurantDetails",
params: {
imgSrc: props.imgSrc,
restaurantName: props.restaurantName,
type: "restaurantDetails",
},
})
}
cardProportions={"w-card h-card"}
label={props.restaurantName}
subLabel="Brighton Vic"
textBoxLayout={"flex-1 p-card flex-row justify-between"}
Button={JoinQueueButton}
buttonProps={{
restaurantName: props.restaurantName,
joined: props.joined,
imgSrc: props.imgSrc
}}
/>
);
};
export default RestaurantCard;
精彩评论