反應<text>三元條件運算符</text>

Question

我是 react-native 的新手，我不知道如何為我想要實現的目標找到解決方案。 我有多個返回 null 或字符串的函數。 我想顯示不是 null 時的返回值。例如我的函數是

//these functions either return null or a string
const a =() => { ...};
const b =() => { ...};
const c =() => { ...};

我有一個<Text>組件，我想顯示<Text>組件內函數的返回值。

現在我正在通過以下方式進行

<Text>
  {a()}{b()}{c()}
</Text>

現在一切正常，當文本是字符串時，文本只會顯示返回值。

我想添加一個三元條件運算符並檢查新變量tmp是否未定義。 如果tmp未定義，則<Text>應該顯示tmp值，否則它應該顯示我上面的 function 的返回值。

<Text>
  {tmp !== undefined ? tmp : }{a()}{b()}{c()}
</Text>

如果我做類似的事情

<Text>
  {tmp !== undefined ? tmp : (
  a();
  b();
  c();
  )}
</Text>

如果tmp未定義，它也會顯示從 function 返回的 null。 但我不希望函數返回的 null 像第一個示例那樣顯示。

Answer 1

您a 、 b和c函數可以返回一個空字符串而不是null嗎？

如果是這樣，您可以將答案重寫為：

<Text>{tmp || `${a() + b() + c()}`}</Text>

如果沒有，寫起來會稍微麻煩一點，但是同樣的思路也行：

<Text>{tmp || `${a() || ''}${b() || ''}${c() || ''}`}</Text>

Answer 2

有多種方法可以實現這一點，在 React Native 中，您可以嵌套<Text>組件。 如果不使用三元運算符，我會這樣做：

<View>
  {tmp && (
    <Text>
      {_a && <Text>{_a}</Text>}
      {_b && <Text>{_b}</Text>}
      {_c && <Text>{_c}</Text>}
    </Text>
  )}
</View>

看零食https://snack.expo.dev/@abranhe/undefinedvalues