JSX 中的道具

在 JSX 中有几种不同的方法来指定道具。

JavaScript 表达式

你可以通过使用 {} 将任何 JavaScript 表达式作为 prop 传递。例如，在这个 JSX 中：

<MyComponent count={1 + 2 + 3 + 4} />

在 MyComponent 中，props.count 的值将是 10，因为 1 + 2 + 3 + 4 的表达式被评估。

如果语句和 for 循环不是 JavaScript 中的表达式，那么它们不能直接在 JSX 中使用。

字符串文字

当然，你也可以通过任何 string literal 作为 prop。这两个 JSX 表达式是等价的：

<MyComponent message="hello world" />

<MyComponent message={'hello world'} />

传递字符串文字时，其值为 HTML-unescaped。所以这两个 JSX 表达式是等价的：

<MyComponent message="&lt;3" />

<MyComponent message={'<3'} />

这种行为通常无关紧要。这里只提到完整性。

道具默认值

如果没有为道具传递任何值，则默认为 true 。这两个 JSX 表达式是等价的：

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

但是，React 团队在他们的文档中说不建议使用这种方法，因为它可能与 ES6 对象简写 {foo} 混淆，后者是 {foo: foo} 而不是 {foo: true} 的缩写。他们说这种行为就在那里，以便它与 HTML 的行为相匹配。

传播属性

如果你已经有道具作为对象，并且你想在 JSX 中传递它，你可以使用 ... 作为传播操作符来传递整个道具对象。这两个组件是等效的：

function Case1() {
  return <Greeting firstName="Kaloyab" lastName="Kosev" />;
}

function Case2() {
  const person = {firstName: 'Kaloyan', lastName: 'Kosev'};
  return <Greeting {...person} />;
}