我正在尝试编写一种有条件地呈现链接的方法。我有以下功能:
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 进行渲染?
最佳答案
我相信你必须包装 <span>
和单个元素中的文本个人信息以进行 react 。除此之外,我没有看到任何明显的错误:
{renderLinkIf(
<span><span className={sectionCompleted(30) ? 'completed' : null}>
{sectionCompleted(30) ? <CheckIcon /> : <HeaderPersonalInfo />}
</span> Personal Info</span>,
true,
'/dashboard',
)}
关于javascript - JSX 中的条件链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43381800/