如何在反应中渲染空间？

Question

我有一个像这样的组件：

  <CustomerInfo
              key={customer.id}
              customerId={customer.id}
              customerName={customer.firstName + ' ' + customer.lastName}
  />

这是在表达式中添加空格的方法吗？可能有什么缺点？

Answer 1

您可以将任何有效的JavaScript表达式放在JSX的花括号内。解析完JS表达式后，React会将其值返回给您传递的prop。因此没有任何不利方面。很好！

要处理姓氏或名字之一为空/未定义的情况：

getFullName(fName, lName) {
return (fName ? (fName + ' ') : '' + lName ? lName : '').trim();
}

<CustomerInfo
              key={customer.id}
              customerId={customer.id}
              customerName={this.getFullName(customer.firstName, customer.lastName)}
  />