用數組數據反應三元運算符不起作用？

Question

更新：下面的解決方案

我試圖讓我的數據文件中的這些圖標出現，但它顯示 [object object] 然后未定義沒有任何圖標的數據

這是我寫的顯示錯誤的內容

    <div>
      {dropdown ? `${item.iconClosed}` : `${item.iconOpened}`}
    </div>

基本上我希望圖標僅在打開或關閉下拉菜單時顯示。

如果我只是這樣做

    <div>{item.iconClosed}</div>

它顯示得很好。 但是當我嘗試添加 if 或 else 語句時，我似乎無法找出正確的編寫方法

注意在數據文件中，它只是一個圖標作為值

   iconClosed: <RiIcons.RiArrowDownSFill />,
   iconOpened: <RiIcons.RiArrowUpSFill />,

另外，我有沒有任何圖標的數據，那么如果值存在或不存在，我將如何編寫僅顯示這些圖標的邏輯？

我的邏輯是這樣的

if(dropdown) {
show upArrow
} else if(dropdown === false) {
show downArrow
} else {
 show null
 }

我的問題是如何在 div 中將其編寫為三元運算符？

<div>{dropdown && dataContainsDropdown ? "downArrow" : " "}</div>

這里的問題是我無法檢查下拉菜單是否打開並顯示 upArrow

更新了有效的答案

   <div>
      {item.dropDown && dropdown
        ? item.iconOpened
        : item.dropDown
        ? item.iconClosed
        : null}
    </div>

Answer 1

dropdown ? `${item.iconClosed}` : `${item.iconOpened}`

這里的問題是您將圖標放入模板字符串中，因此結果將是一個字符串（稍后添加到 DOM）。 由於您的圖標是 object，它將使用返回“[對象對象]”的默認 Object toString 方法進行字符串化

您在這里根本不需要模板字符串，只需執行以下操作：

dropdown ? item.iconClosed : item.iconOpened

編輯：您可以在?之前將多個條件與邏輯 AND/OR 結合起來如果你想確保你的項目有圖標

Answer 2

您得到[object Object]是因為您試圖將 object 呈現為字符串。

    <div>
      {/* if item.iconClosed is a React element, don't put it in a string */}
      {dropdown ? `${item.iconClosed}` : `${item.iconOpened}`}
      {/* just use it directly as the evaluated result of your ternary */}
      {dropdown ? item.iconClosed : item.iconOpened}
    </div>

現在，如果您想處理沒有圖標的情況，無論是關閉還是打開，您都可以這樣做。

function MyComponent() {
  // ...other component code
  let icon = dropdown ? item.iconClosed : item.iconOpened
  icon = !icon ? null : icon
  
  return (
    // ...other jsx returned from element
    <div>{icon}</div>
  )
}

現在，這里還有一些對 React 來說不是很慣用的東西，但我不會 go 進入那些，除非你喜歡我。

Answer 3

問題在於，編譯器從每個 JSX 模板創建一個 object，其中包含 React 創建該節點所需的所有信息 [1]。 因此，當您在模板字符串中使用它們中的任何一個時，它會調用.toString並返回[object Object] 。 為了解決您的問題，只需擺脫模板字符串：

    <div>
      {dropdown ? `${item.iconClosed}` : `${item.iconOpened}`}
    </div>

[1] 實際情況是編譯器只調用了由 React 提供的 function，它創建了所需的 object。