пользовательский компонент сетки реагирует, фоновое изображение - PullRequest
Новая
       39

пользовательский компонент сетки реагирует, фоновое изображение

0 голосов
/ 04 ноября 2018

У меня есть компонент в реакции, пользовательская сетка, которую я хочу использовать дважды на одной странице, но с разными фоновыми изображениями, я хотел бы передать эти изображения с подпорками из корневого компонента, что является правильным способом сделать Это? и это хорошая идея сделать это вообще? этот код, который я написал, работает, но я не уверен, что это правильно 

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

1 Ответ

0 голосов
/ 04 ноября 2018

Если вы не можете жестко закодировать эти URL-адреса изображений в CSS, но вы собираетесь получить их из реквизита, я не вижу лучшего способа сделать это.

Вот что говорят React документы:

В некоторых примерах в документации для удобства используется стиль, но использование атрибута стиля в качестве основного средства оформления элементов обычно не рекомендуется. В большинстве случаев className следует использовать для ссылки на классы, определенные во внешней таблице стилей CSS. Стиль чаще всего используется в приложениях React для добавления динамически вычисляемых стилей во время рендеринга .

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

Кстати, вы можете установить все статические параметры в CSS и оставить только изображения для встроенных стилей

...