Question

无法尝试添加＆＃39;字符串到样式组件中传递的prop。另外，我还不完全确定我是否可以在样式化组件中使用prop.x。这就是我的意思：

＆＃13;

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>
    )
  }

＆＃13;

让我知道我是否可以更清楚地了解某些事情。

Answer 1

添加＆＃34; s＆＃34;变量后可以正常工作。

＆＃13;

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

＆＃13;

代码价值千言万语

＆＃13;

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

＆＃13;

Answer 2

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

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 prop值

2 个答案: