![](/img/trans.png)
[英]ReactJs props returns undefined in componentDidMount
[英]ReactJS Props Undefined
我正在学习如何使用道具。 在用我的母语或英语进行研究后,我无法为我的问题找到合适的答案。 请告诉我为什么这会引发错误。 这是 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;
谢谢你帮我。
道具作为参数传递给 function 组件。 您不能引用this.props
。 从props
参数访问它:
function Product7 (props) {
return (
<h4>{props.name}</h4>
)
}
不要在功能组件中使用this
, <h4>{props.name}</h4>
如果要在组件中使用 props,必须将其定义为参数:
function Product7(props) {
...
您不能在功能组件中使用它。 请通过此链接拨打 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
您应该在组件中将 props 作为参数传递。
function Product7(props){
...
}
当您在功能组件中传递道具时,您必须将props
作为 function 的参数传递。
另一件事是,不需要在功能组件中使用this
关键字。
function Product7 (props) {
return (
.
.
.
<h4>{props.name}</h4>
)
}
注意:使用函数式组件时练习ECMA Script 6 箭头函数是个好习惯,如下。
const Product7 = (props) => {
return (
.
.
.
<h4>{props.name}</h4>
)
}
看起来您忘记了在括号中使用props
。
function Product7 (props) {
...
...
}
哦,确保不要使用this.props
因为你使用的是基于 function 的组件(只有基于 class 的组件需要使用this.props
)
通过在您的 function 中添加道具来捕获数据,并在不使用它的情况下调用它,因为您使用的是功能组件。 我建议在跳功能组件之前先学习class组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.