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

道具作为参数传递给功能组件。您无法引用this.props。从props参数访问它：

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

Answer 2

请勿在功能组件this中使用<h4>{props.name}</h4>

Answer 3

如果要在组件中使用道具，则必须将其定义为参数：

with PdfPages('/Users/mak/Test.pdf') as pdf:
    pdf.savefig(fig1)
    plt.close()

Answer 4

您不能在功能组件中使用此功能。请仔细阅读此link。

    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

您应该在组件中传递prop作为参数。

function Product7(props) {
...

Answer 6

在功能组件中传递道具时，必须传递props作为函数的参数。

另一件事是，无需在功能组件中使用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（仅基于类的组件需要使用this.props）

Answer 8

通过在函数中添加道具来捕获数据，并在不使用 this 的情况下调用它，因为您正在使用函数组件。我建议在跳功能组件之前先学习类组件

ReactJS道具未定义

8 个答案: