React：使用来自其他组件的道具设置背景图片

Question

我希望我正确地提出这个问题（我仍然使用React绿色）。

我正在编写一个组件，它将从另一个组件的props中设置背景图像（来自jpgs的文件夹）。因此，假设组件是“项目”，那么背景图像将被设置为“project.jpg”（组件“关于”将具有“about.jpg”的背景图像）

我已经尝试过写这篇文章，看起来我已经接近但并非一直都在那里。任何可以帮我破解这段代码的React.js大师都会让我赞美你的屏幕名称

我的代码

    import React from 'react';
import styled from 'styled-components';

const pathToBgImages = require.context('../../../src/static', true);

const bgImages = [
  'about.jpg',
  'blog.jpg',
  'contact.jpg',
  'projects.jpg'
]

const getImages = () => bgImages.map(name => `<img src='${pathToBgImages(name, true)}'/>`);

const BgBackground = styled.div`
  width: 100%;
  &::after {
    content: "";
    background: url(${getImages});
    background-size: cover;
    opacity: 0.25;
    height: 400px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
  }
`

class BgImage extends React.Component {
  render() {
    return (
  <BgBackground />
    );
  }
}

export default BgImage;

我知道该组件中有一些空白而且没有正确写入，我仍然试图解决这个问题。提前谢谢！