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

Question

我有以下反应功能组件：

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 属性，这应该渲染一个带有超链接的名称，否则它应该只渲染该名称。

如果我按原样使用代码，则会收到错误：

Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.

这显然是因为，正如{name}被两组大括号包围的那样，React 认为它是一个对象而不是字符串。

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

Answer 1

你不需要{name}. 那时它正在评估实际的 js 代码。只需使用这样的名称：

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