如何根据样式元素中的名称动态加载导入的组件?

时间:2017-12-26 14:25:58

标签: reactjs styled-components react-proptypes

今天我有一个关于REACT包样式组件的问题。 我想要完成的是创建一个样式化的div组件,它将用作视差容器,并且必须加载某个图像作为其背景。 现在我可以将图像导入到文件中,并在styled.div中使用$ {imgComponentName}进行调用。 但是我试图能够加载具有多个图像的相同Parallax组件,我希望将其名称作为支持来调用像<Parallax bgi="mountain">这样的Parallax组件。

我目前的代码如下:

import PropTypes from 'prop-types'
import styled from 'styled-components'
import hills from '../static/img/home/hills.jpeg'
import mountain from '../static/img/home/mountain.jpeg'

const bgi = props => props.bgi ? props => props.bgi : "mountain"

export const Parallax = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  background-image: url(${bgi});
  background-attachment: fixed;
  background-size: cover;
  flex-direction: column;
`

Parallax.propTypes = {
  bgi: PropTypes.oneOf(['mountain', 'hills'])
}

是否有一种方法可以使用字符串调用导入图像的名称,该字符串是作为prop bgi传递的?

祝你好运, 帕特里克

P.S。 我知道扩展语法,但我想尝试通过一个样式组件解决问题。

2 个答案:

答案 0 :(得分:0)

你可以像这样使用

const bgi = props => props.bgi ? props => require(props.bgi) : "mountain"

background-image: url(${require(bgi))}

答案 1 :(得分:0)

我不是百分百肯定,但我认为你必须传递不同的道具。你必须记住,你实际上只传递一个字符串,它被转换为DOM中的css类并返回一个React Component。 例如此文档:https://www.styled-components.com/docs/basics#attaching-additional-props

可能是这样的:

const Parallax = styled.div.attrs({
    url: props => props.bgi ? props => props.bgi : "mountain"
})`
  background-image: url(${props => props.url});
`;

你试过内联吗?像这样:

const Parallax = styled.div`
    background-image: url(${props => props.bgi ? props => props.bgi : "mountain"});
`