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}

修改：
感谢您的建议，您说得对，该品牌未能正确关闭标签。我最终将元素的渲染移动到一个单独的函数，以便标记正确关闭：

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

Answer 1

您在NavBar上缺少结束标记。 NavItem有一个结束标记，因此它可以工作。

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

Answer 2

语法错误是JSX的错误。必须手动关闭所有JSX标记，以便更改导航栏标记。

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

这些不会：

<navbar />

OR

<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'
}) } />

这非常有用，因为您可以列出您想要的任何类名（例如我添加的＆＃39; navbar＆＃39;类），您还可以包含一个对象来处理具有此结构的所有条件类：

{
    desiredClassName: boolean,
    anotherPossibleClass: boolean,
}

这允许您将条件作为对象的值和className作为键。 true将导致className包含密钥。

Answer 3

有两种方法可以实现这个目标

选项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标签。希望这有帮助

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

3 个答案: