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

【问题标题】：How to load a imported component dynamically based on its name inside a styled element?如何根据样式元素内的名称动态加载导入的组件？
【发布时间】：2018-06-07 08:59:50
【问题描述】：

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

我当前的代码如下：

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传递？

最好的问候，帕特里克

附：我知道扩展语法，但我想尝试通过一个样式组件来解决问题。

【问题讨论】：

您是否尝试过这里的答案：stackoverflow.com/questions/41346413/…？

标签： reactjs styled-components react-proptypes

【解决方案1】：

你可以像这样使用require

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

或

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

【讨论】：

感谢您的回答，但是当我尝试这样实现它时，我收到以下错误消息：错误：找不到模块“。”只是为了澄清一下：import 和 require 不是需要模块、组件或类似东西的两种不同实现吗？
这个问题可能与这个错误有关吗？ github.com/webpack/webpack/issues/4772
我认为错误不是require，可能是props.bgi 的问题。你试过第二个吗？
问题正在以任何一种方式发生。一旦我尝试在给定的字符串上使用require，就会引发错误。 props.bgi 应该不是问题，输出似乎是正确的。将其直接传递给背景图像时，它看起来像这样：url(mountain).

【解决方案2】：

我不是 100% 确定，但我认为你必须以不同的方式传递道具。您必须记住，您实际上只是传递了一个字符串，该字符串在 DOM 中被转换为一个 css 类并返回一个 React 组件。例如这里的文档：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"});
`

【讨论】：