ReactJS 道具未定義

Question

我正在學習如何使用道具。 在用我的母語或英語進行研究后，我無法為我的問題找到合適的答案。 請告訴我為什么這會引發錯誤。 這是 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

道具作為參數傳遞給 function 組件。 您不能引用this.props 。 從props參數訪問它：

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

Answer 2

不要在功能組件中使用this ， <h4>{props.name}</h4>

Answer 3

如果要在組件中使用 props，必須將其定義為參數：

function Product7(props) {
...

Answer 4

您不能在功能組件中使用它。 請通過此鏈接撥打 go。

    import React from 'react';
    
    
    function Product7({name}) {
      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>{name}</h4>
    
         
          <a className="btn btn-primary">Click to enter</a>
    
          </div>
          
              </div>
        </div>
        )
    }
    
    export default Product7;


  [1]: https://reactjs.org/docs/components-and-props.html

Answer 5

您應該在組件中將 props 作為參數傳遞。

function Product7(props){
    ...
}

Answer 6

當您在功能組件中傳遞道具時，您必須將props作為 function 的參數傳遞。

另一件事是，不需要在功能組件中使用this關鍵字。

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

注意：使用函數式組件時練習ECMA Script 6 箭頭函數是個好習慣，如下。

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

Answer 7

看起來您忘記了在括號中使用props 。

function Product7 (props) {
...
...
}

哦，確保不要使用this.props因為你使用的是基於 function 的組件（只有基於 class 的組件需要使用this.props ）

Answer 8

通過在您的 function 中添加道具來捕獲數據，並在不使用它的情況下調用它，因為您使用的是功能組件。 我建議在跳功能組件之前先學習class組件