通过使用样式组件单击按钮来切换样式

Question

onClick 之后，它会在 app.js 中启动函数 onToggleLiked 来切换 like 属性并返回（或不）喜欢到item.js。之后，AppListItem检查是否出现like，如果结果为true，则使用const theme中的样式，其他 - 来自 defaultProps。

如何做到这一点？我尝试创建一个函数，但失败了。

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 theme = {
    op: "1",
    ts: "translateX(0px)"
}
export default class PostListItem extends Component {
    render() {
           const {like} = this.props;
           if (like) {?}

return (
        <AppListItem>
            <ItemLabel as="span"
            onClick={onToggleLiked}>
                {label}
            </ItemLabel>

Answer 1

您可以根据喜欢的条件简单地传播所需的属性。

render() {
   const { like } = this.props;
   const props = like ? { theme: theme } : AppListItem.defaultProps;
   return <AppListitem {...props}>....;
}