在 JSX 语法（React）中使用三元条件表达式时出现语法错误答案

【问题标题】：Syntax error when I use ternary conditional expression in JSX-syntax (React)在 JSX 语法（React）中使用三元条件表达式时出现语法错误
【发布时间】：2016-09-14 23:05:47
【问题描述】：

我收到以下代码的错误：

{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>
    );
}

【问题讨论】：

标签： reactjs syntax-error ternary-operator react-jsx

【解决方案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 标记。希望这会有所帮助

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

语法错误是您的 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 将生成包含密钥的类名。

【讨论】：