Как изменить фон компоненты в зависимости от условий или динамически?

1. Для изменения фона компоненты в зависимости от условий или динамически, можно использовать свойство style компоненты и устанавливать в него объект со стилями CSS.

Пример:
```jsx
import React, { useState } from "react";

function MyComponent() {
  const [backgroundColor, setBackgroundColor] = useState("red");

  const handleClick = () => {
    // При клике на компоненту меняем цвет фона
    setBackgroundColor("blue");
  };

  return (
    <div
      style={{
        backgroundColor,
        width: "200px",
        height: "200px",
      }}
      onClick={handleClick}
    >
      Компонента с изменяемым фоном
    </div>
  );
}

export default MyComponent;
```

В этом примере компонента `MyComponent` имеет начальный фоновый цвет "red". При клике на компоненту, цвет фона меняется на "blue".

2. Чтобы задать фоновое изображение для каждой карточки в блоке, используя данные из полученного списка, можно использовать свойство style внутри цикла или функционального компонента для рендеринга каждой карточки.

Пример:
```jsx
import React from "react";

function CardList({ cards }) {
  return (
    <div>
      {cards.map((card) => (
        <div
          key={card.id}
          style={{
            backgroundImage: `url(${card.imageUrl})`,
            backgroundSize: "cover",
            width: "200px",
            height: "200px",
          }}
        >
          {card.title}
        </div>
      ))}
    </div>
  );
}

export default CardList;
```

В этом примере компонента `CardList` рендерит список карточек из переданного свойства `cards`. Каждая карточка имеет фоновое изображение, заданное свойством `imageUrl` объекта `card`. Фоновое изображение устанавливается в свойство style объекта, используя `backgroundImage`.

Для использования компоненты `CardList` с передачей списка карточек, можно сделать следующее:
```jsx
import React from "react";
import CardList from "./CardList";

const data = [
  { id: 1, title: "Карточка 1", imageUrl: "фоновое изображение 1" },
  { id: 2, title: "Карточка 2", imageUrl: "фоновое изображение 2" },
  { id: 3, title: "Карточка 3", imageUrl: "фоновое изображение 3" },
];

function App() {
  return <CardList cards={data} />;
}

export default App;
```

В этом примере компонента `App` рендерит компоненту `CardList`, передавая ей список карточек из переменной `data`. Каждая карточка имеет свое фоновое изображение.