In rsuitejs, how to make the 'active' tag inside Nav.Item conditional?

Question

Consider the following:

<Sidenav defaultOpenKeys={['2']}>
                <Sidenav.Header>
                    <div style={headerStyles}>Custom Sidenav</div>
                </Sidenav.Header>
                <Sidenav.Body>
                    <Nav>
                    <Nav.Item eventKey="1" active icon={<DashboardIcon />} href="/dashboard">{t('Dashboard')}</Nav.Item>
                    <Nav.Menu eventKey="2" title={t("Statistic Data")} icon={<MagicIcon />}>
                        <Nav.Item eventKey="2-2" href="/newplayerstatistic/level">{t('New Player Level Statistic')}</Nav.Item>
                        <Nav.Item eventKey="2-3" href="/newplayerstatistic/chapter">{t('New Player Chapter Statistic')}</Nav.Item>
                        <Nav.Item eventKey="2-4" href="/currentplayerstatistic/level">{t('Current Player Level Statistic')}</Nav.Item>
                        <Nav.Item eventKey="2-4" href="/currentplayerstatistic/chapter">{t('Current Player Chapter Statistic')}</Nav.Item>
                    </Nav.Menu>
                    </Nav>
                </Sidenav.Body>
            </Sidenav>

In eventKey="1", what is the active tag called? And how do I make it condiional such that it only active when its true, ie {condition ? 'active': ''}. Apperently it is not a string and I cannot set active=true/false.

Answer 1

if I understand it correctly, and you use ractivejs, it is pretty straight forward:

<Nav.Item eventKey="1" {{#if anyVariable }} active {{/if}} icon={<DashboardIcon />} href="/dashboard">{t('Dashboard')}</Nav.Item>

then you do something like ractive.set('anyVariable',true);