Question

我试图写一种有条件地呈现链接的方法。我有以下功能：

const renderLinkIf = (content, condition, href) => {
  if (condition) {
    return (<Link to={href}>{content}</Link>);
  }
  return (content);
};

任务非常简单：

{ renderLinkIf('test', true, '/dashboard') }

但是，我无法弄清楚如何呈现更复杂的内容：

{renderLinkIf(
  <span className={sectionCompleted(30) ? 'completed' : null}>
    {sectionCompleted(30) ? <CheckIcon /> : <HeaderPersonalInfo />}
  </span> Personal Info,
  true,
  '/dashboard',
)}

我刚收到语法错误。

如何通过renderLinkIf传递更复杂的JSX来进行渲染？

Answer 1

我相信您必须将{ id: "1", customer: { id: "1", name: "some customer" }, items: [{ detail: { id: "1", descr: "some item" } }] } 和文本个人信息包装在一个元素中以进行反应。除此之外，我没有看到任何明显的错误：

<span>

JSX中的条件链接

1 个答案: