JSXの条件付きリンク

Question

リンクを条件付きでレンダリングする方法を記述しようとしています。しかし、私はより複雑なコンテンツをレンダリングする方法を見つけ出すことはできません

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

：それが動作する非常に簡単な作業では

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

：私は、次の機能を持っている

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

私は構文エラーを取得するだけです。

レンダリングするために、より複雑なJSXをrenderLinkIfに渡すにはどうすればよいですか？

Answer 1

私はあなたが反応するための単一の要素で<span>とテキスト個人情報をラップする必要があるだろうと信じています。それ以外は、明らかなエラーはありません。

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