在 Text 元素中使用多个变量的正确方法是什么？答案

【问题标题】：What is the correct way to use multiple variables in a Text element?在 Text 元素中使用多个变量的正确方法是什么？
【发布时间】：2020-01-21 07:59:30
【问题描述】：

我似乎找不到在 React Native Text 元素中使用多个变量的“正确”方式。我首先拥有用户，姓氏作为单独的对象值，我想在同一个 Text 元素中显示它们。

<Text>{props.user.firstName} {props.user.lastName}</Text>

这很好用，但 ESLint 不喜欢它。（jsx-one-expression-per-line）。如果我将它们放在不同的行上，那么我无法弄清楚在名字和姓氏之间放置空白的位置。

<Text>
  {props.user.firstName} 
  {props.user.lastName}
</Text>

在 {props.user.firstName} 之后有一个空格，但 ESLint 也不喜欢这样（无尾随空格）。

所以我想问是否有正确的方法可以在不更改 ESLint 配置或创建单独变量的情况下实现我想要的结果。

【问题讨论】：

【解决方案1】：

您正在寻找template literals。您可以像这样嵌套变量：

<Text>`${props.user.firstName} ${props.user.lastName}`</Text>

【讨论】：