используя реквизит на другой странице

Question

Сегодня я работаю с сайтом React / Gatsby. Я хотел бы сделать баннер на каждой странице. Я хотел бы сделать компонент и использовать параметр. Я использую свою фотографию в качестве параметра.

Но каждый раз я получаю сообщение об ошибке: " Невозможно прочитать свойство 'props' с неопределенным "

Индекс. js:

<Banner image={<image parameter>} alt="..."/>

и на моем баннере. js:

import React from 'react';

const Banner = () => {
  return (
      <img src={ this.props.image } className={'banner-fullwidth'} alt={"Banner on page"}/>
  )
}

export default Banner;

Что не так в моем коде?

---

Все еще есть проблема:

Даже если я изменю свою функцию с помощью подпорки в функции стрелки.

Answer 1

Вы находитесь в функциональном компоненте, а не в классе, поэтому вместо использования ключевого слова this вы получаете доступ к props, например:

const Banner = (props) => {
  return (
      <img src={ props.image } className={'banner-fullwidth'} alt={"Banner on page"}/>
  )
}

. Подробнее о компонентах можно прочитать и реквизит в документах .

Answer 2

Во-первых, вы не используете 'this' в функциональном компоненте. Поэтому вместо этого используйте реквизит. Однако я вижу, что вы не передавали реквизиты в качестве параметра в компоненте баннера.

То, что вы должны сделать, это

const Banner = (props) => {
 return (
  <img src={ props.image } />
 )
 }

Или более элегантный способ, деструктурировать / вытащить изображение из опоры

Answer 3

Ваш баннер является функциональным компонентом, поэтому используйте props.image, а не this.props.image, потому что this.props.image для компонента на основе класса.

const Banner = (props) => {
  return (
      <img src={ props.image } className={'banner-fullwidth'} alt={"Banner on page"}/>
  )
}

Определите / передайте свой реквизит как const Banner = (props) => {}

Или

Деструктурируйте , чтобы избежать упора.

const Banner = ({image }) => {
      return (
          <img src={image} className={'banner-fullwidth'} alt={"Banner on page"}/>
      )
    }