如何简化React组件中重复的isPressedStyle逻辑？

当然可以把两个按压样式的逻辑合并成一行，直接根据variant和isPressed的状态生成对应的样式对象，避免代码重复。

修改后的核心代码 #

把原来的isPressedStyle和isPressedStyle2替换成单个变量，两种写法任选其一：

写法一：嵌套三元表达式（简洁紧凑）

const pressedStyle = isPressed 
  ? variant === "white" 
    ? { backgroundColor: "gray" } 
    : { opacity: 0.5 } 
  : {};

写法二：对象扩展语法（逻辑更直观）

const pressedStyle = isPressed ? {
  ...(variant === "white" && { backgroundColor: "gray" }),
  ...(variant === "transparent" && { opacity: 0.5 })
} : {};

完整修改后的ListItem组件 #

export function ListItem({ variant }: ListItemProps) {
    const [isPressed, setIsPressed] = React.useState(false);
    // 合并后的按压样式逻辑
    const pressedStyle = isPressed 
      ? variant === "white" 
        ? { backgroundColor: "gray" } 
        : { opacity: 0.5 } 
      : {};

    function onPressIn() {
        setIsPressed(true);
    }
    function onPressOut() {
        setIsPressed(false);
    }
    return (
        <View style={[ styles.row, variant === "white" && styles.backgroundColorWhite]}>
            <Pressable
                onPressIn={onPressIn}
                onPressOut={onPressOut}
                style={[
                    styles.container,
                    pressedStyle // 只用这一个变量即可
                ]}
            >
            </Pressable>
        </View>
    );
}

逻辑说明 #

• 当isPressed为false时，直接返回空对象，不添加任何按压样式
• 当isPressed为true时，根据variant的值返回对应样式：
  • 若variant是white，返回背景色为灰色的样式
  • 若variant是transparent，返回透明度为0.5的样式

这样既精简了代码，也让按压状态的样式逻辑更集中，后续维护起来更方便。

内容的提问来源于stack exchange，提问作者CodingProfile