在 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

有两种方法可以实现此目的

选项 1：

class MyComponent extends React.Component {
  render() {
    return (      
      this.props.mountedPage === "frontpage" ?
      <h1>asdad</h1> :
      <h1/>
    );
  }
}

React.render(
  <MyComponent mountedPage="frontpage" name="Joe Schmoe"/>,
  document.getElementById('react_example')
);

选项 2：

class MyComponent extends React.Component {
  render() {
    return (
      <div>
      {
        this.props.mountedPage === "frontpage" ?
        <h1>asdad</h1>:
        <h1/>
      }
      </div>
    );
  }
}

React.render(
  <MyComponent mountedPage="frontpage" name="Joe Schmoe"/>,
  document.getElementById('react_example')
);

还要记得正确关闭 HTML 标签。希望这有帮助

Answer 2

您的导航栏上缺少结束标记。 NavItem 有一个结束标签，所以它有效。

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

Answer 3

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

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

这些不会：

<navbar />

或

<navbar></navbar>

编辑：在这种情况下有条件地渲染一个完全不同的组件并不是理想的解决方案，因为唯一的区别是 className。您可以执行此操作以有条件地更改 className:

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

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

import classNames from 'classnames'

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

它非常有用，因为你可以列出任何你想要的 class 名称（比如我添加的 'navbar' class），你还可以包含一个对象来处理你所有的条件class具有这种结构的元素：

{
    desiredClassName: boolean,
    anotherPossibleClass: boolean,
}

这允许您将条件作为对象的值，并将 className 作为键。 true 将生成包含密钥的 class 名称。

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

Syntax error when I use ternary conditional expression in JSX-syntax (React)

reactjs

syntax-error

ternary-operator

react-jsx