在 JSX 中添加布尔值

Question

我有一个场景，我想在我的 JSX 中添加一个简单的布尔值。这只是一个标志，表明某事是否处于活动状态。

<NavItem href="#/gosomewhere" active >

我不确定如何在 JSX 中传递“活动”标志。

我认为这会很好：

const active= location.pathname.match(/^\/gosomewhere/) ? "active" : "";

return(

                <NavItem eventKey={1} href="#/gosomewhere" {active} >
                    Go Somewhere
                </NavItem>
)

但是我得到了这个错误：

Module build failed: SyntaxError: Unexpected token, expected ...

在这种情况下我是否需要使用展开运算符？

Answer 1

您可以像传递其他道具一样传递布尔值，只需使用active={true|false}：

const active = location.pathname.match(/^\/gosomewhere/);
return(
   <NavItem eventKey={1} href="#/gosomewhere" active={active} >
     Go Somewhere
   </NavItem>
)

Answer 2

回答“is active=true 等同于 'active' 吗？”

是的，active={true} 等同于 active。 W3C recommandation 建议只标记active

我将其发布为答案，因为我没有足够的声誉来发表评论。