Как правильно задать атрибут style в React?

Question

[Владислав]

У меня проблема, есть компонент, в который должна ставиться картинка на бэкграунд у блока через атрибут style, картинка должна передаваться в компонент по props'ам сверху вниз. Я реализовал примерно по документации, но картинки просто нет!

import React from 'react';

import Button from './Button'

export default function Post(props){
    const postImage ={
        background: 'url(' + props.img + ') no-repeat center top/cover'
    };
    return(
        <div className="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div className="post__item" style={postImage}>
                <div className="descr">
                    <p className="post__title">{props.title}</p>
                    <Button className="button">Open</Button>
                    <div className="post__descr">
                        {
                            props.descr
                        }
                    </div>
            </div>
        </div>
    </div>
    );
}

Answer 1

[0xD34F]

Я реализовал примерно по документации, но...

А точно по документации вместо примерно не пробовали? - ну там, у {{postImage}} по фигурной скобке с обоих концов убрать, например.

Comments

[Владислав]

я скопировал до того, как исправил это, всё также не работает

[0xD34F]

Vladislav, "не работает" - это как? Ошибки какие-нибудь есть в консоли? Нет только картинки, или вообще ничего нет? А может, картинка есть, просто высота нулевая - вот вы её и не видите?

[Владислав]

0xD34F, никаких ошибок, на странице картинки попросту нет, консоль пуста, картинки нет, т.к. она натянута на блок, то у нее есть высота, сам блок в DOM отлично виден

[0xD34F]

Vladislav, ну тогда закиньте код в песочницу, взгляну повнимательнее.

[Владислав]

0xD34F, https://codepen.io/Cetch/pen/oERNNg

[0xD34F]

Vladislav, под "закиньте код" я подразумевал воспроизведение той ситуации, что вы имеете у себя, а не простое копирование... Впрочем, доделал за вас - всё работает. Дальше сами.

[Владислав]

0xD34F, никогда не пользовался Codepen'ом, но у меня ситуация работала, не знаю в чём проблема, но за решение - спасибо большое