React Native：你能根據字符串的存在有條件地渲染 JSX 嗎？

Question

在我的 React Native 應用程序中，我試圖根據特定字符串是否存在有條件地呈現<Text>組件。 我試着這樣做：

<View>
  {
    someString
    &&
    <Text>
      {someString}
    </Text>
  }
</View>

這引發了錯誤Text strings must be rendered within a <Text> component 。 我是這樣做的，效果很好。

<View>
  {
    someString
    ?
    <Text>
      {someString}
    </Text>
    :
    null
  }
</View>

我認為問題在於第一種方法試圖實際呈現字符串，而不是檢查它是否存在。 不過，我想使用第一種方法，因為它更簡潔，而且我在代碼的其他地方使用了相同的約定。

有誰知道是否可以像這樣使用&&而不是? + : ？

Answer 1

這是因為empty字符串是 false-y 意味着它將在組件中呈現。 如果不將字符串包裝在 Text 組件中，則無法呈現字符串（即使是像''這樣的空字符串）。

空字符串值遇到與數字相同的問題。 但是因為呈現的空字符串是不可見的，所以這不是您可能不得不處理的問題，甚至不會注意到。 但是，如果您是一個完美主義者並且不希望 DOM 中出現空字符串，您應該采取與我們在上面對數字所做的類似的預防措施。