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

Question

我有以下 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 道具存在，这应该呈现一个带有超链接的名字，否则它应该只呈现名字。

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

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}

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

Nested curly braces causing error with ternary in React

ternary

reactjs