反应三元运算符错误答案

【问题标题】：React ternary operator error反应三元运算符错误
【发布时间】：2018-04-11 18:01:27
【问题描述】：

我正在尝试仅使用三元运算符将仅由用户创建的 Firebase 数据返回到他们的主页，但我不断收到错误消息：语法错误：意外令牌，预期

谁能看到代码哪里出错了？如果我将三元组包裹在删除按钮周围，它将起作用，只允许用户删除他们创建的项目。我只想显示他们创建的东西。反应代码如下：

  <ul>
  {this.state.items.map((item) => {
    return (
      {item.user === this.state.user.displayName || item.user === this.state.user.email
      ? <li key={item.id}>
          <h3>{item.topic}</h3>
          <p>author: {item.user}
            <button onClick={() => this.removeItem(item.id)}>Remove Item</button>
          </p>
        </li>
      : null}
    )
  })}
  </ul>

【问题讨论】：

return {<some expression>} 不是有效的 JavaScript。

标签： javascript reactjs jsx ternary-operator

【解决方案1】：

Embedding Expressions in JSX:

你可以在 JSX 中嵌入任何 JavaScript 表达式，方法是用 curly 包裹它大括号。

{} 当我们想在 JSX 中放置一些 js 表达式时需要，在你的情况下它不是必需的。如果您使用{}，则表示您正在尝试返回一个对象。

这样写：

return (
    item.user === this.state.user.displayName || item.user === this.state.user.email?
        <li key={item.id}>
            <h3>{item.topic}</h3>
            <p>
                author: {item.user}
                <button onClick={() => this.removeItem(item.id)}>Remove Item</button>
            </p>
        </li>
    : null
)

【讨论】：