问React函数组件三元运算符返回html元素

EN

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>
    )
}