我經常在代碼庫中找到這種 switch 陳述句，卻無法在任何地方找到有關它的檔案。有誰知道這種語法的名稱？
import React from 'react'
enum Options {
FirstOption = 'first',
SecondOption = 'second'
}
export default function DisplayIcon({selectedOption: string}) {
const clickFirst = () => {
// do something
}
const clickSecond = () => {
// do something
}
return (
<Wrapper>
{
{
[Options.FirstOption]: (
<ClickableIcon onClick={ clickFirst }>
<Icon type={ IconType.Frist } />
</ClickableIcon>
),
[Options.SecondOption]: (
<ClickableIcon onClick={ clickSecond }>
<Icon type={ IconType.Second } />
</ClickableIcon>
),
}[selectedOption]
}
</Wrapper>
)
}
uj5u.com熱心網友回復：
這根本不是一個switch陳述，盡管你是對的，它被用來選擇一個值。它是一個具有計算屬性名稱的物件字面量。所以它正在構建一個物件，然后從該物件中挑選出匹配的屬性selectedOption，所有這些都在同一個運算式中。
這是具有計算屬性名稱的物件文字部分的更簡單示例：
const name1 = "a";
const name2 = "b";
const obj = {
[name1]: "value for a",
[name2]: "value for b",
};
console.log(obj);下面是該代碼構建物件然后立即獲取其屬性之一的示例：
const name1 = "a";
const name2 = "b";
const pickOne = Math.random() < 0.5 ? name1 : name2;
const pickedValue = {
[name1]: "value for a",
[name2]: "value for b",
}[pickOne];
console.log(`Picked "${pickOne}": "${pickedValue}"`);FWIW，我不會那樣做。我要么定義物件一次并重用它，要么在回傳之前在代碼中使用switch或if/或類似的。else if
uj5u.com熱心網友回復：
這不是 JSX 特有的，也不是真正的特定語法，而是多種語法的組合。讓我們稍微簡化一下：
let result = {
[Options.FirstOption]: 'hello',
[Options.SecondOption]: 'goodbye',
}[selectedOption];
這將選擇'hello'或'goodbye'。它首先創建一個物件，然后在其上查找一個屬性。我們可以像這樣添加一個中間變數：
let options = {
[Options.FirstOption]: 'hello',
[Options.SecondOption]: 'goodbye',
};
let result=options[selectedOption];
[...]:語法只是允許基于其他變數而不是文字字串來定義鍵本身。我們可以像這樣一次添加一個屬性：
let options = {};
options[Options.FirstOption] = 'hello';
options[Options.SecondOption] = 'goodbye';
let result=options[selectedOption];
結果，正如您已經制定的那樣，等同于：
let result;
if ( selectedOption === Options.FirstOption ) {
result = 'hello';
}
elseif ( selectedOption === Options.SecondOption ) {
result = 'goodbye';
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/481024.html
標籤：javascript 反应 打字稿 jsx
下一篇：型別'JQueryPromise<unknown>'不可分配給型別'JQueryPromise<string>'