Reactjs 什么'；在React Native中内联呈现嵌套文本组件的最佳方式是什么？

我正在寻找以React Native（两种样式都不同）内联显示嵌套文本的最可读、最有效的方法

在这种情况下，如果

foo

值为

undefined

，则

bar

也为

undefined

。 我有两个解决方案，正如预期的那样有效

包装在

文本中

组件：

{foo&&(
{foo}
{bar&（{`和${bar}}}
)}

在以下情况下呈现空字符串：

{foo&&(
{foo}
{bar？`和${bar}`:''}
)}

问题是。以上哪种解决方案更好（为什么）？

---

您对如何实现它有更好的想法吗？

第一种解决方案优于第二种解决方案，因为在第一种解决方案中，当文本包含值时，您仅呈现文本

条。另一方面，在第二种解决方案中，即使
条
没有值，内部文本组件也始终会呈现。
您可以构建一个数组，然后
连接（“”
，然后可以使用单个

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

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


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