Reactjs 嵌套的大括号导致React中的三元错误

我有以下功能组件：

const EventRow = props => {
  const { key, date, name, ticketLink, location } = props;

  return (
    <tr key={key}>
      <td> {date} </td>
      <td className="events-italic">
        {
          ticketLink.length > 0 ? <a href={ticketLink}>{name}</a> : {name} 
        }
      </td>
      <td> {location} </td>
    </tr>
  );
};

如果ticketLink道具存在，则应该呈现一个名称及其周围带有超链接，否则应该仅呈现该名称

如果按原样使用代码，则会出现错误：

对象作为找到的React子对象无效：具有键{name}的对象。如果要呈现子对象集合，请改用数组

这显然是因为{name}被两组花括号包围，React将其视为对象而不是字符串

我知道我可以使用if/else语句分解代码并有条件地呈现，但是有没有办法修改三元数以便正确地解析它？

您不需要{name}。到那时，它正在评估实际的js代码。只需使用如下名称：

{ticketLink.length > 0 ? <a href={ticketLink}>{name}</a> : name}

您不需要{name}。到那时，它正在评估实际的js代码。只需使用如下名称：

{ticketLink.length > 0 ? <a href={ticketLink}>{name}</a> : name}

应该是：name。React并不认为它是一个对象，它是一个对象。它应该是：name。React并不认为它是一个对象，它是一个对象。