有没有一种方法可以使用我在 jsx 中声明的情感样式组件中的 js？答案

【问题标题】：Is there a way I can use js which I declared inside jsx in emotion styled components?有没有一种方法可以使用我在 jsx 中声明的情感样式组件中的 js？
【发布时间】：2020-10-04 10:35:02
【问题描述】：

我希望能够将数组的长度应用于情感样式的组件，这样如果数组中有 2 或 3 个项目，代码就不会改变。

如果项目数组是 2

animation: ${slideNews2} 6s infinite;

如果项目数组是 3

animation: ${slideNews3} 9s infinite;

我想要实现的目标

animation: ${`slideNews+arrayNum`} arrayNum * 3s infinite;

https://codesandbox.io/s/dreamy-knuth-k1vrz?file=/src/App.js

import React from "react";
import styled from "@emotion/styled";
import { keyframes } from "@emotion/core";


const slideNews2 = keyframes`
  0% { top: 100% }
  5% { top: 0 }
  45% { top: 0 }
  50% { top: -135% }
  100% { top: -135% }
`;

const slideNews3 = keyframes`
0 % { top: 100% }
2 % { top: 0 }
31 % { top: 0 }
33 % { top: -135% }
71 % { top: -135% }
73 % { top: -270  }
100 % { top: -270% }
`;


const InfoTitle = styled.div`
 animation: ${slideNews2} 6s infinite;
`;

const App = () => {
  const array = [
    {
      title: "news1",
      content: "brabrabrabra1"
    },
    {
      title: "news2",
      content: "brabrabrabra2"
    },
    {
      title: "news3",
      content: "brabrabrabra3"
    }
  ];

  const arrayNum = array.length;
  console.log(arrayNum);

  return (
    <>
      {array.map((item, i) => (
        <InfoTitle key={i} index={i}>
          {item.title}
        </InfoTitle>
      ))}
    </>
  );
};

export default App;

【问题讨论】：

标签： reactjs emotion

【解决方案1】：

你应该试试这个：

import React from "react";
import styled from "@emotion/styled";
import { keyframes } from "@emotion/core";


const slide_news2 = keyframes`
  0% { top: 100% }
  5% { top: 0 }
  45% { top: 0 }
  50% { top: -135% }
  100% { top: -135% }
`;

const slide_news3 = keyframes`
0 % { top: 100% }
2 % { top: 0 }
31 % { top: 0 }
33 % { top: -135% }
71 % { top: -135% }
73 % { top: -270  }
100 % { top: -270% }
`;

const InfoTitle = styled.div`
 animation: ${props => `slide_${props.key} ${props.index * 2}s infinite`};
`;

const App = () => {
  const array = [
    {
      title: "news1",
      content: "brabrabrabra1"
    },
    {
      title: "news2",
      content: "brabrabrabra2"
    },
    {
      title: "news3",
      content: "brabrabrabra3"
    }
  ];

  const arrayNum = array.length;
  console.log(arrayNum);

  return (
    <>
      {array.map((item, i) => (
        <InfoTitle key={item.title} index={i}>
          {item.title}
        </InfoTitle>
      ))}
    </>
  );
};

export default App;

【讨论】：

【解决方案2】：

只需粘贴此代码。

import React from "react";
import styled from "@emotion/styled";
import { keyframes } from "@emotion/core";


const slideNews2 = keyframes`
  0% { top: 100% }
  5% { top: 0 }
  45% { top: 0 }
  50% { top: -135% }
  100% { top: -135% }
`;

const slideNews3 = keyframes`
0 % { top: 100% }
2 % { top: 0 }
31 % { top: 0 }
33 % { top: -135% }
71 % { top: -135% }
73 % { top: -270  }
100 % { top: -270% }
`;


const InfoTitle = styled.div`
  animation: ${props => `${props.num}  6s infinite`};
`;

const App = () => {
  const array = [
    {
      title: "news1",
      content: "brabrabrabra1"
    },
    {
      title: "news2",
      content: "brabrabrabra2"
    },
    {
      title: "news3",
      content: "brabrabrabra3"
    }
  ];

  const arrayNum = array.length;
  console.log(arrayNum);

  return (
    <>
      {array.map((item, i) => (
        <InfoTitle key={i} index={i} num={"slideNews" + arrayNum}>
          {item.title}
        </InfoTitle>
      ))}
    </>
  );
};

export default App;

【讨论】：