Javascript 为什么我不能像在React组件中那样在无状态函数中使用this.props？

在react组件中使用props时，我使用this.props.name访问

name

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

但当我在函数[无状态]中执行相同的操作时，我会得到一个错误：

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

功能展示（道具）{
返回(
你好{这个。道具。名字}

);
}

---

为什么会这样？

如果将

name

传递给

Show

，那么您只需从

props.name

而不是

this.props.name

获取它

i、 e.如果在某处发生这种情况：

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

然后您可以像这样访问它：

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

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

功能展示（道具）{
return你好{props.name}！
；
}

或者，您可以使用道具对名称进行分解，如下所示：

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

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

函数显示（{name}）{
return你好{name}！
；
}

因为道具是作为参数传入的，而不是作为属性设置的。看看你写的代码，你可以在函数定义中看到它。因为FunctionComponents中没有

这个

，只有传递的目标@jonrsharpe谢谢你。@AnaSvitlica你已经给出了明确的解释。Thanksecept@AnaSvitlica的解释不是100%正确<代码>显示当然是一个组件。无状态与有状态是一个古老的、死气沉沉的术语。基于类的组件可以是无状态的，功能组件可以是有状态的。