Чтобы установить фоновое изображение в React из переменной, вы можете использовать несколько методов. Вот несколько подходов, которые вы можете рассмотреть:

1. Встроенный стиль.
   Вы можете использовать атрибут styleдля динамической установки фонового изображения. Создайте переменную, содержащую URL-адрес изображения, а затем используйте ее во встроенном стиле компонента, например:

   import React from 'react';
   const MyComponent = () => {
    const backgroundImageUrl = 'your-image-url.jpg';
    return (
      <div style={{ backgroundImage: `url(${backgroundImageUrl})` }}>
        {/* Content of your component */}
      </div>
    );
   };
   export default MyComponent;

2. Класс CSS.
   Другой вариант — определить класс CSS, который задает фоновое изображение, и динамически применять этот класс к компоненту. Вот пример:

   import React from 'react';
   import './MyComponent.css';
   const MyComponent = () => {
    const backgroundImageUrl = 'your-image-url.jpg';
    return <div className="my-component" />;
   };
   export default MyComponent;

   В отдельном CSS-файле с именем MyComponent.cssопределите класс и установите фоновое изображение:

   .my-component {
    background-image: url(your-image-url.jpg);
   }

3. Стилизованные компоненты.
   Если вы используете стилизованные компоненты, вы можете создать стилизованный компонент с динамическими реквизитами для установки фонового изображения. Вот пример:

   import React from 'react';
   import styled from 'styled-components';
   const MyComponent = styled.div`
    background-image: ${(props) => `url(${props.backgroundImageUrl})`};
   `;
   const MyComponentWrapper = () => {
    const backgroundImageUrl = 'your-image-url.jpg';
    return <MyComponent backgroundImageUrl={backgroundImageUrl} />;
   };
   export default MyComponentWrapper;

Это всего лишь несколько способов установить фоновое изображение в React из переменной. Выберите тот, который лучше всего соответствует структуре и требованиям вашего проекта.