将样式化组件与React组件的props一起使用

最后发布: 2017-11-14 12:33:10


问题

我在我的React js项目中使用样式化的组件。 在构造样式化的组件img时,我希望背景依赖于组件获取的道具。 如果我正在构建功能组件,则只需使用:

  const FramedImage = styled.img`
  background-size: cover;
  background: URL(${props.imageUrl});
  background-position: center center;
  background-repeat: no-repeat;`;

在组件内部,并且可以正常工作。 但是如何使用类组件实现相同的目的? 因为我不能在类本身内部声明常量var,而且在类的外面也没有this.props

谢谢!

reactjs styled-components
回答

在组件范围之外定义时,您需要传递一个函数来访问道具 因此,在您的情况下:

const FramedImage = styled.img`
  background-size: cover;
  background: URL(${props => props.imageUrl}); //use a function here instead
  background-position: center center;
  background-repeat: no-repeat;
`;

styled-components在CSS模板中遇到函数时,它将使用分配给组件的props进行调用。

请记住,尽管这是指分配给FramedImage组件的道具 ,所以如果要从其父组件传递道具 ,则需要这样传播它们:

class Parent extends React.Component {
  render() {
    return <FramedImage {...this.props} />
  }
}