使用styled-components实现根据like状态切换组件样式

• 原有代码无法运行的两个核心原因：
  • 未建立like属性值与对应样式配置的绑定关系，空的if判断没有完成theme传递动作
  • 直接在render作用域引用onToggleLiked、label变量，未从组件props中解构，触发未定义引用错误

修正后可运行的完整代码 #

import styled from 'styled-components';

// 样式读取逻辑保持原有写法不变
let AppListItem = styled.div`
  .fa-heart {
    transform: ${props => props.theme.ts};
    opacity: ${props => props.theme.op};
  }
`

// 未点赞状态的默认样式配置，原有逻辑保留
AppListItem.defaultProps = {
  theme: {
    op: "0",
    ts: "translateX(30px)"
  }
}

// 点赞激活态的样式配置，原有定义保留
const likedTheme = {
  op: "1",
  ts: "translateX(0px)"
}

export default class PostListItem extends Component {
  render() {
    // 解构所有依赖的props
    const { like, label, onToggleLiked } = this.props;
    return (
      // *核心修改*：根据like值透传匹配的theme配置
      <AppListItem theme={like ? likedTheme : AppListItem.defaultProps.theme}>
        <ItemLabel as="span"
          onClick={onToggleLiked}
        >
          {label}
        </ItemLabel>
      </AppListItem>
    )
  }
}

运行逻辑说明 #

• 父子组件传递链路仅需保证：app.js中onToggleLiked触发时，更新内部维护的like状态，将最新的like值、onToggleLiked方法通过props逐层传递到PostListItem组件，样式切换就会自动生效
• 不需要在styled组件内部硬编码like值判断逻辑，通过外层传递匹配的theme对象的方式，和已经定义的defaultProps默认配置完全兼容
• 不做组件级别的条件渲染，仅通过动态切换样式配置实现心形图标位移、透明度的状态变化，避免不必要的组件重挂载性能损耗

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