JSX 中的道具

Created: November-22, 2018

在 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} />;
}