React как сопоставить данные для отображения изображения для стилизованного компонента prop?

#reactjs #styled-components

Вопрос:

Итак, у меня есть слайдер изображения, который отображает данные и отображает мои изображения

 {SliderData.map((slide, index) => {
    return (
           <Section>
            <h1>{slide.title}</h1>
            <Image src={slide.image} alt={slide.alt} />
           </Section>
            );
 })}

И мой файл данных выглядит так

  export const SlideData = [
  {
   title: 'title',
   alt: 'alt',
   image: './images/image-1.jpg'
  },
   {
   title: 'title 2',
   alt: 'alt 2',
   image: './images/image-2.jpg'
  },
 ]

Моя проблема в том, как мне передать изображение в стилизованный компонент вместо жесткого кодирования его в моем JSX?

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

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

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

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

Есть идеи?

Ответ №1:

Это может сработать

 <Section bg={bgPath} alt="logo" />

const Section= styled.section`
   background-image: url(${(props) => props.bg});   
`;

1. что такое вход?

2. Это путь к фоновому изображению.

3. но как бы вы получили несколько изображений, если их больше одного? Мне нужно сопоставить список из нескольких изображений, а не просто отображать одно изображение

Ответ №2:

Хорошо, я думаю, это то, о чем вы говорите:

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

Затем:

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

Документация:

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