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}

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

1 个答案: