javascript - ReactJS Prop 未定义

Question

我正在学习如何使用 Prop 。在用我的母语或英语进行研究之后，我无法为我的问题找到正确的答案。
请告诉我为什么这会引发错误。这是 App.js 文件(默认)

import React from 'react';
import './App.css';
import Product7 from './componentep7/Product7';

function App() {
  return (
    <div>
    <nav className="navbar navbar-inverse">
      <div className="container-fluid">
        <a className="navbar-brand" >Title</a>
      </div>
    </nav>
    <div className="container">
<div className="row">
  <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">


  
    <Product7 name="valiant"/>

    

  </div>
</div>

    </div>
    </div>
    )
}

export default App;

这是组件文件(Product7.js)
一切都很好，只是它在 {this.props.name} 返回了一个错误

import React from 'react';


function Product7() {
  return (
    <div>
    <div className="col-xs-5 col-sm-5 col-md-5 col-lg-5">
      <a className="thumbnail">
        <img src="https://yuzu-emu.org/images/game/boxart/hollow-knight.png" alt="5tr"/>
      
      </a>
      <div className="caption">

<h4>{this.props.name}</h4>

     
      <a className="btn btn-primary">Click to enter</a>

      </div>
      
          </div>
    </div>
    )
}

export default Product7;

谢谢你帮助我。

Answer 1

Prop 作为参数传递给函数组件。您不能引用 this.props .从 props 访问它争论:

function Product7 (props) {
  return (
    <h4>{props.name}</h4>
  )
}