prop参数在React中从哪里来？

Question

在react中，您可以声明一个函数或类组件，并在其中使用prop对象以使您的代码更可重用。 但是我似乎无法弄清楚prop参数本身来自何处。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

要么

 class Welcome extends React.Component {
render() {
 return <h1>Hello, {this.props.name}</h1>;
 }
}

然后您可以创建如下实例：

<Welcome name="Larry" />
<Welcome name="Tim" />

在这两个示例中，我似乎都无法理解props对象的来源。

Answer 1

您的困惑来自您正在查看JSX（而不是普通javascript）的事实。 此JSX被编译为纯Javascript，执行的操作是这样的：

React.createElement(Welcome, {name: 'Larry'}, null)

在此示例中，您可以看到Welcome是您的组件，而作为第二个参数传递给createElement函数的对象是props 。

您可以在React网站（ 不带JSX的React ）上阅读有关此内容的更多信息。