Блог

Главная - Вопросы по программированию - Компоненты в стиле React передают URL-адрес изображения для отображения разных изображений на странице?

Компоненты в стиле React передают URL-адрес изображения для отображения разных изображений на странице?

#reactjs #styled-components

#reactjs #стилизованные компоненты

Вопрос:

Итак, я создал этот компонент с фоновым изображением, но мне нужно динамически передавать URL-адрес изображения, чтобы мне не приходилось вручную копировать и вставлять весь код на каждую страницу.

Вот мой текущий метод добавления изображения в мой компонент

  import Photo from './images/photo-1.jpg'

 const Section = styled.section`
   background: url(${Photo}) center;
  `

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

Я пробовал это, но он говорит, что изображение не определено.

 const Component = ({image}) => {
return (
 <Section image={image}></Section>
}

Затем в папке «Мои страницы» я передаю его следующим образом

  import Photo from './images/photo-1.jpg'

 <Component image={Photo} />

Но по какой-то причине это не работает

Например, если я нахожусь на home странице, которую хочу photo-1.jpg отобразить. Но если я нахожусь на About странице, которую хочу photo-2.jpg отобразить.

Поэтому я хочу использовать <Component image={PhotoTwo} /> бесконечно и просто передать любое фоновое изображение, которое мне нужно использовать на основе моей страницы.

Есть какие-нибудь идеи, почему он говорит image , что не определен?

Вот мой код, обычно содержащий одно изображение.

 import React from 'react';
import styled from 'styled-components';
import Photo from './images/photo-1.jpg'

 const Section = styled.section`
   background: url(${Photo}) center;
  `

 const Component = () => {
 return (
  <Section>My Section</Section>
 }

Затем на моей домашней странице я просто добавляю его обычно следующим образом

     const Home = () => {
      return (
        <>
          <Component />
        </>
      );
    };

    export default Home;

И это прекрасно показывает мое фотоизображение, если у меня есть только одно изображение. Но что, если я хочу повторно использовать этот компонент, но передать другой образ? Как бы я это сделал?

Комментарии:

1. Можете ли вы указать более подробную информацию? например, ваш полный код?

2. что еще вам нужно? единственное, что отображает фоновое изображение, — это «background: url ($ {Photo}) center;», так что это прекрасно работает только с одним изображением. Но если я хочу передать URL-адрес изображения динамически, то именно тогда у меня возникают проблемы

3. Например, что такое styled.section ?

4. Я добавил блок ниже. Это просто мой стилизованный компонент, показывающий изображение

Ответ №1:

В Styled Section вы импортируете реквизит неправильным способом.

Если вы передаете реквизит изображения в Styled Section ,

 <Section image={image}></Section>

Внутри Styled Section вы получите такие реквизиты, как,

 const Section = styled.section`
   background: url(${(props) => props.image || 'fallback-image.jpg' }) center;
  `

Ссылка:

  1. https://styled-components.com/docs/basics#passed-props