如何使用內聯開關返回一個jsx元素？

我正在嘗試使用內聯開關返回一個元素。但我只得到一個空的<span> </span>。我究竟做錯了什麼？如何使用內聯開關返回一個jsx元素？

getRowTdForHeader: (header: string, entry: response) => { 
      return (<span> 
       {() => { 
        switch (header) { 
         case "Name": return entry.name; 
         case "Type": return entry.type; 
         default: return entry.name; 
        } 
       } } 
      </span>); 
     }

結果是空span，如果我把一個斷點在返回，它從未進入switch語句都沒有。如果可能的話，我想保留它作爲內聯。如果我沒有內嵌它順便說一句，開關工作正常。

來源

2017-01-24 Murat K.

首先，我沒有看到'（目的）=>'其次，不需要連開關。你可以做'entry [（header ||'name'）]' – Rajesh

@Rajesh這是如何工作的[entry [（header ||'name'）]'？ –

'entry'是一個對象，並且由於您返回的是同一個詞但不同大小寫的屬性，'header.toLowercase（）'會爲您提供屬性名稱。所以如果頭是'Name'，'entry [header.toLowerCase（）]'將返回'entry ['name']'。 '|| 'name'是默認值。如果頭沒有定義，則返回'name'。也是我的歉意，我忘了'.toLowerCase（）' – Rajesh

您必須包裝在父母的箭頭功能。

{(() => { 
    switch (header) { 
         case "Name": return entry.name; 
         case "Type": return entry.type; 
         default: return entry.name; 
        } 
})()}

來源

2017-01-24 10:05:23

此語法起作用。你能解釋一下嗎？ –

看到這個線程http://stackoverflow.com/questions/22138550/immediate-function-using-javascript-es6-arrow-functions –

你定義的功能，但不能稱之爲

() => { 
    switch (header) { 
     case "Name": return entry.name; 
     case "Type": return entry.type; 
     default: return entry.name; 
    } 
}

來源

2017-01-24 10:00:46

如何調用它？ –

as @Vladu回答 –

我建議你把結果到一個變量，然後使用它：

getRowTdForHeader: (header: string, entry: response) => { 
    let str: string; 
    switch (header) { 
     case "Name": str = entry.name; 
     case "Type": str = entry.type; 
     default: str = entry.name; 
    } 

    return <span> { str } </span>; 
}

來源

2017-01-24 10:06:41

我想我可以這樣做，但我很好奇內聯函數。 –

感覺在這種情況下使用函數是多餘的。你沒有什麼可以從中獲益的。 –

我的主要目的是使用''標籤內的開關。不知道如果沒有函數調用，我該怎麼辦？ –

如何使用內聯開關返回一個jsx元素？

回答

相關問題