React 功能组件三元运算符返回html元素

Question

我正在尝试使用三元运算符对我的功能组件进行一些可选更改。但是更改会导致错误。

我正在尝试渲染图标，但我正在渲染图标代码。

export const Navitem = (props) => {
    const routes = useRouter()
    const active = routes.pathname == props.link ? ' active' : null
    const submenuIcon = props.className === 'has-submenu' ? ' <i class="ti-angle-right"></i>' : null
    const badge = props.badgde !== null ? '<span className=' + props.badge + '>' + props.badgeText + '</span>' : null
    return(
        <li className={props.className + active}>
            <Link href={props.link}>
                <a><i className={props.icon}></i><span>{props.text + submenuIcon + badge}</span>
                </a>
            </Link>
            {props.children}
        </li>
    )
}

我期待的结果是：>

但实际上，我收到的是<i class="ti-angle-right"></i>

我可以做些什么来解决这个问题？

Answer 1

使用 JSX 代替带引号的字符串 '<i class="ti-angle-right"></i>':

'has-submenu' ? <i class="ti-angle-right" /> : null