Question

我一直在尝试使用传递给该组件的prop来渲染我的CSS，以使这种逻辑能够应对情绪。但是动画CSS属性被忽略了-我认为这是因为完成此操作的方式意味着该函数是针对动画属性字符串而不是值返回的。

有人可以帮我做正确的语法吗？

import React from "react";
import { css } from "emotion";

const strike = keyframes`
  from{
    transform: scaleX(0)
  }
  to{
    transform : scaleX(1)
  }
`;

const todoStyle = css`
cursor: pointer;
  color: red;
  position: relative;
  display: inline-block;
  /* width: 200px; */
  &:before {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    top: 50%;
    background: black;
    position: absolute;
    transform-origin: 0 50%;
    animation: ${strike} 0.3s ${props => (props.todo.complete === false ? " normal" : " reverse")};
  }
`;

// everything works except the animation property above is ignored

export default props => (
  <div className={todoStyle} onClick={props.toggleComplete}>
    {props.todo.text}
  </div>
);

Answer 1

当您在animation: ${strike} 0.3s ${props => ...}中呼叫todoStyle时，情感将不知道道具是什么-我很惊讶没有东西会引发错误。

您可以尝试在组件内部移动props函数：

  export default props => (
-   <div className={todoStyle} onClick={props.toggleComplete}>

+   <div className={css`
+     ${todoStyle}
+     animation: ${strike} 0.3s ${props => (!props.todo.complete ? "normal" : "reverse")};
+     `} onClick={props.toggleComplete}>

      {props.todo.text}
    </div>
  );

反应情感CSS-模板文字返回函数不值

1 个答案: