Каков наилучший способ рендеринга встроенного компонента Text в React Native?

Question

Я ищу наиболее читаемый и эффективный способ отображения вложенного текста, встроенного в React Native (оба стиля по-разному).

{
    ....
    foo?: string
    bar?: string
}

В этом случае, если значение foo равно undefined тогда bar также равно undefined. У меня есть два решения, которые работают как ожидалось.

1. Завернутый в Text компонент:

   {foo && (
     <Text>
       <TextA>{foo}</TextA>
       {bar && (<TextB>{` and ${bar}`}</TextB>)}
     </Text>
   )}

Отображение пустой строки в случае:

   {foo && (
     <TextA>
       {foo}
       <TextB>
         {bar ? ` and ${bar}` : ''}
       </TextB>
     </TextA>
   )}

Вопрос в том. Какое из перечисленных решений лучше (и почему)? У вас есть идея, как это реализовать?

Answer 1

Вы можете построить массив, затем join(" "), тогда вы можете использовать один <Text>.

Answer 2

Первое решение лучше, чем второе, потому что в первом вы визуализируете текст bar только тогда, когда он содержит значение. С другой стороны, во втором решении внутренний текстовый компонент всегда будет отображаться, даже если bar не имеет значения.