为什么我不能像在React Components中那样在无状态函数中使用this.pops

Question

当我在react Components中使用props时，我使用this.props.name访问name。

this.state = {
seconds:parseInt(this.props.start)
};

但当我在函数[无状态]中做同样的事情时，我会得到一个错误：

function Show(props) {
return (
<p>Hello {this.props.name}!</p>
);
}

为什么会这样？

Answer 1

如果name被传递给Show，那么您只需要从props.name而不是this.props.name获得它

即，如果这种情况发生在某个地方：

<div>
<Show name="The Simpsons" />
</div>

然后你可以这样访问它：

function Show(props) {
return <p>Hello {props.name}!</p>;
}

或者你可以破坏道具的名称，比如：

function Show({ name }) {
return <p>Hello {name}!</p>;
}