在其他页面使用道具

Question

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

但每次我收到错误：“无法读取未定义的属性‘道具’ ”

索引.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;

我的代码有什么问题？

---

还是遇到了问题：

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

Answer 1

您在一个功能组件中，而不是在一个类中，因此您不用使用this关键字，而是props像这样访问：

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

您可以在文档中阅读有关组件和道具的更多信息。