自定义网格组件反应，背景图片答案

【问题标题】：custom grid component react, background image自定义网格组件反应，背景图片
【发布时间】：2018-11-04 00:51:07
【问题描述】：

我有一个反应组件，我想在同一页面中使用两次但具有不同背景图像的自定义网格，我想通过根组件的道具传递这些图像，正确的方法是什么它？这样做是个好主意吗？我写的这段代码正在运行，但我不确定这样做是否正确

`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">`

【问题讨论】：

标签： reactjs image background styling

【解决方案1】：

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

React 文档是这样说的：

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

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

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

【讨论】：

最后我通过props添加了背景图片添加类