自定义网格组件反应，背景图像

Question

我在react中有一个组件，一个自定义网格，我想在同一页面中使用两次，但背景图像不同，我想将这些带有道具的图像作为根组件传递，正确的方法是什么？这样做是个好主意吗？我写的这段代码是有效的，但我不确定做是正确的

`import React, { Component } from 'react';
import InnerTextGridCategory from './InnerTextGridCategory';
import InnerTextGridTitle from './InnerTextGridTitle';
import PlayLink from './PlayLink';
class CustomGrid extends Component {
render() {
const styles = {
img1: {
background: `linear-gradient(61deg, #000000 0%, rgba(0, 0, 
0, 0) 70%),url(${this.props.img1})`,
backgroundSize: `cover`,
backgroundPosition: `center`,
}
};
return (
<div className={`${this.props.gridSize}`}>
<div className={`${this.props.gridSize} item1`} style= 
{styles.img1}>
<div className="wrapper-text-grid">`

Answer 1

如果不能在CSS中硬编码这些图像URL，但你要从道具中获取它们，我看不到更好的方法。

React文档说：

文档中的一些示例使用样式是为了方便，但通常不建议使用样式属性作为元素样式的主要方式。在大多数情况下，className应该用于引用在外部CSS样式表中定义的类样式在React应用程序中最常用，用于在渲染时添加动态计算的样式。

https://reactjs.org/docs/faq-styling.html#can-i-use-inline-styles

顺便说一句，你可以在CSS中设置所有的静态道具，只留下图像到内联样式