Question

我在react中有一个组件，一个自定义网格，我想在同一页面中使用两次，但是背景图像不同，我想通过props将此图像与根组件一起传递，正确的方法是它？这是个好主意吗？我写的这段代码可以正常工作，但是我不确定该做正确的事

`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文档所说的：

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

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

顺便说一句，您可以在CSS中设置所有静态道具，仅将图像保留为内联样式

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

1 个答案: