JSX 中的条件链接答案

【问题标题】：Conditional link in JSXJSX 中的条件链接
【发布时间】：2017-09-08 22:59:48
【问题描述】：

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

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 进行渲染？

【问题讨论】：

标签： javascript reactjs react-router jsx

【解决方案1】：

我相信您必须将 <span> 和文本 个人信息 包装在单个元素中以进行反应。除此之外，我没有看到任何明显的错误：

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

【讨论】：