React + Typescript + Styled Components 将道具传递给关键帧和条件

Question

我正在尝试将道具传递给keyframe 元素并做一些条件动画。这是我的代码：

import styled, { keyframes } from "styled-components";
import {
  PRIMARY,
  SECONDARY,
  DANGER,
  TEXT,
  OUTLINE,
} from "../../constans";

interface PropTypes {
  color?: string;
  variant?: string;
  size?: string;
  shadow?: boolean;
  disabled?: boolean;
  hoverAnimation?: boolean;
}

const StyledButton = styled.button<PropTypes>`
  // [... SOME CODE ...]
  animation: ${(props) => hoverAnimate(props)} 2s infinite;
`;

const hoverAnimate = (props: PropTypes) => keyframes`
        100%{
            color: ${() => {
              console.log(props);
              if (props.variant) {
                if (props.color) {
                  return `var(--color-${props.color})`;
                }
                return "#444";
              }
              return "#fff";
            }};

            background: ${() => {
              if (props.variant === TEXT || props.variant === OUTLINE)
                return "#f00";
              console.log("object");
              if (props.color === PRIMARY) return "var(--color-primary)";
              if (props.color === SECONDARY) return "var(--color-secondary)";
              if (props.color === DANGER) return "var(--color-danger)";
              return "var(--color-default)";
            }};
        }
`;

我做错了什么？

TS 抱怨：

'() => string' 类型的参数不能分配给'SimpleInterpolation' 类型的参数。 类型“() => string”缺少类型“readonly SimpleInterpolation[]”中的以下属性：concat、join、slice、indexOf 和其他 17 个。

然后，console.log(props) 打印：

object

它就像一个字符串。我无法在开发工具中扩展这个object（即使尝试解构）。

Answer 1

您似乎正在尝试使用IIFE（立即调用的函数表达式）来返回将在template strings 中使用的“字符串”。

但是你得到 TypeScript 错误：

'() => string' 类型的参数不能分配给'SimpleInterpolation' 类型的参数。

因为你当前的代码：

const hoverAnimate = (props: PropTypes) => keyframes`
  100%{
    color: ${() => {
      if (props.variant) {
        if (props.color) {
          return `var(--color-${props.color})`;
        }
        return "#444";
      }
      return "#fff";
    }};
    ...

没有正确调用 IIFE。

这里是如何通过调用（注意额外的()s）IIFE 来修复它：

const hoverAnimate = (props: PropTypes) => keyframes`
  100%{
    color: ${(() => { // Here, at start
      if (props.variant) {
        if (props.color) {
          return `var(--color-${props.color})`;
        }
        return "#444";
      }
      return "#fff";
    })()}; // And, here
    ...

您也需要对background 执行相同的操作。