1

尝试将“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>
    )
  }

让我知道我是否可以更清楚一些事情。

4

2 回答 2

1

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

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

于 2017-08-24T04:51:30.393 回答
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

于 2017-08-24T04:49:07.047 回答