reactjs - 在 JSX 语法(React)中使用三元条件表达式时出现语法错误

Question

我收到以下代码的错误:

{this.props.mountedPage === "frontpage" ?
            <Navbar className="navbar-nomargin"> :
            <Navbar>}

错误消息:Error - Parsing error: Unexpected token .指 this.props.mountedPage 中的第一个点

我有几行类似的东西，它工作正常，没有任何 lint 错误:

{this.props.mountedPage === "frontpage" ?
                    <NavItem href="/#services">Tjänster</NavItem>
                    : null}

编辑 :
感谢您的建议，您是对的，linter 未能正确关闭标签。我最终将元素的渲染移到了一个单独的函数中，以便标签可以正确关闭:

render: function() {
    return (
        this.props.mountedPage == "frontpage" ?
        <Navbar className="navbar-nomargin">{this.renderBody()}</Navbar> :
        <Navbar>{this.renderBody()}</Navbar>
    );
}

Answer 1

语法错误是您的 JSX 错误。所有 JSX 标签都必须手动关闭，因此请更改导航栏标签。

<navbar> // this will throw a syntax error in JSX

这些不会:

<navbar /> 

或者

<navbar></navbar>

编辑:
在这种情况下，有条件地渲染一个完全不同的组件并不是理想的解决方案，因为唯一的区别是类名。您可以这样做以有条件地更改类名:

<navbar className={ this.props.mountedPage === 'frontpage' ? 'navbar-nomargin' : '' } />

或者你可以使用这个 npm 包 classnames我发现这在任何 React 应用程序中都非常有用，因为这是很常见的事情。

import classNames from 'classnames'

...
<navbar className={ classNames('navbar', {
    'navbar-nomargin': mountedPage === 'frontPage'
}) } />

它非常有用，因为您可以列出您想要的任何类名(例如我添加的“导航栏”类)，您还可以包含一个对象来处理具有此结构的所有条件类:

{
    desiredClassName: boolean,
    anotherPossibleClass: boolean,
}

这允许您将条件作为对象的值并将类名作为键。 true将导致包含 key 的类名。