Javascript 反应：使用其他组件的道具设置背景图像

我希望我问的这个问题是正确的（我对React还没有反应）

我正在编写一个组件，它将从另一个组件的道具中设置背景图像（来自JPG文件夹）。假设组件为“projects”，那么背景图像将设置为“project.jpg”（而组件“About”的背景图像为“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;

从“React”导入React；
从“样式化组件”导入样式化；
const pathToBgImages=require.context（'../../../src/static'，true）；
常量bg图像=[
“about.jpg”，
“blog.jpg”，
“contact.jpg”，
“projects.jpg”
]
const getImages=（）=>bgmages.map（name=>``）；
const bg background=styled.div`
宽度：100%；
&：：之后{
内容：“；
背景：url（${getImages}）；
背景尺寸：封面；
不透明度：0.25；
高度：400px；
排名：0；
左：0；
底部：0；
右：0；
位置：绝对位置；
z指数：-1；
}
`
类BgImage扩展了React.Component{
render（）{
返回(
);
}
}
导出默认图像；

---

我知道该组件中有一些空白，但写得不正确，我仍在努力解决这个问题。提前谢谢你

您是否得到任何错误，我还认为背景：url（${getImages}）；应该是

background:url（getImages（））只是一个警告：警告“getImages”被分配了一个值，但从未使用过任何未使用的变量