javascript - 在其他页面使用 props

Question

今天我正在使用 React/Gatsby 网站。我想在每个页面上制作一个横幅。我想制作一个组件并使用参数。我使用我的照片作为参数。

但每次我收到错误:“无法读取未定义的属性'props'”

索引.js:

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

在我的 Banner.js 上:

import React from 'react';

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

export default Banner;

我的代码有什么问题？

<小时/>

仍然有问题:

即使我用箭头函数中的 props 改变了我的函数。

Answer 1

您位于函数组件中，而不是类中，因此您可以像这样访问 props，而不是使用 this 关键字:

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

您可以阅读有关组件和 Prop 的更多信息 in the docs .