Реагирующая функциональная составляющая тернарного оператора return html element - PullRequest
Новая
       8

Реагирующая функциональная составляющая тернарного оператора return html element

0 голосов
/ 28 марта 2020

Я пытаюсь получить некоторые дополнительные изменения в моем функциональном компоненте в реакции, используя троичный оператор. Но изменение приводит к ошибке.

Я пытаюсь сделать иконку, а точнее, я рисую код иконки. 

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>

Что я могу сделать, чтобы решить эту проблему?

1 Ответ

0 голосов
/ 28 марта 2020

Используйте JSX вместо строки в кавычках '<i class="ti-angle-right"></i>': 

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