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

【问题标题】：Why cannot I use this.props in stateless functions like I did in React Components?为什么我不能像在 React Components 中那样在无状态函数中使用 this.props？
【发布时间】：2020-10-01 07:32:46
【问题描述】：

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

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

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

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

为什么会这样？

【问题讨论】：

因为 props 是作为参数传入的，而不是作为属性设置的。看你写的代码，在函数定义中可以看到。
因为FunctionComponents中没有this，只有传入的参数
@AnaSvitlica 你已经给出了明确的解释。谢谢
除了@AnaSvitlica 的解释不是 100% 正确。 Show 肯定是一个反应组件。无状态与有状态是旧的、死的命名法。基于类的组件可以是无状态的，而功能组件可以是有状态的。

标签： javascript reactjs web-frontend

【解决方案1】：

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

即如果这发生在某处：

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

那么你可以像这样访问它：

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

或者你可以从 props 中解构名字，像这样：

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

【讨论】：