Concat 属性值与样式组件中的字符串

Question

尝试将 's' 字符串添加到样式组件中传递的道具时遇到问题。另外，我不完全确定我是否可以在样式化的组件中使用 prop.x。这就是我的意思：

const MyComponent = (props) => {
  const StyledLineItem = styled.li`
    animation: ${someAnime};
    animation-delay: ${props.x}; // <- will this work?
// here i need to add the 's' to the end 
// but i can't use `` becaouse of the fact that styled components 
// are in a template tag already... at least i think that's why 
// i get errors when i try `${props.x}s`
// also, i haven't tested but will using ${prop.x} in a styled-component
// like this even work?
  `
  return (
    <StyledLineItem>{props.text}</StyledLineItem>
  )
}

// in my main component...

// ... react component stuff
  render() {
    return (
      <ul>
        {_.map(data, (item, i) => <MyComponent key={i} text={item.text})}
      </ul>
    )
  }

如果我可以更清楚地了解某些事情，请告诉我。

Answer 1

在变量后添加 "s" 就可以了。

`animation-delay: ${props.x}s`

一千字代码

var x = .3;
var a = `animation-delay: ${x}s`;
var b = "animation-delay: "+x+"s";
console.log(a===b) //true

Answer 2

是的，您可以在模板标签内使用 `` 是的，您可以使用 props 通过使用函数插入值来在您的样式化组件中生成您的样式，例如在您的代码中：

const MyComponent = (props) => {
  const StyledLineItem = styled.li`
    animation: ${someAnime};
    animation-delay: ${props => `${props.x}s` : '0'};
  `
  return (
    <StyledLineItem>{props.text}</StyledLineItem>
  )
}

// in my main component...

// ... react component stuff
  render() {
    return (
      <ul>
        {_.map(data, (item, i) => <MyComponent key={i} text={item.text})}
      </ul>
    )
  }

更多信息：

https://www.styled-components.com/docs/basics#adapting-based-on-props

Concat 属性值与样式组件中的字符串

Concat prop value with string in styled-component

reactjs

template-strings

styled-components