Question

今天我有一个关于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。我知道扩展语法，但我想尝试通过一个样式组件解决问题。

Answer 1

你可以像这样使用

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

或

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

Answer 2

我不是百分百肯定，但我认为你必须传递不同的道具。你必须记住，你实际上只传递一个字符串，它被转换为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"});
`

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

2 个答案: