JSX中的條件鏈接

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

我相信你不得不包裹<span>和文本個人信息在一個單一的元素反應。除此之外，我沒有看到任何明顯的錯誤：

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