1

我无法browserify编译我试图使用条件渲染的反应文件。

渲染函数：

render() {
    const hasObjects = this.state.objects.length === 0 ? false : true;
    return {hasObjects ? (<p> Objects </p>) : (<p>No objects are available.</p>)};   
}

当我尝试使用 编译时browserify，出现以下错误。

SyntaxError: ~/Projects/Project/src/index.js: Unexpected token, expected , (26:27)
  24 |     render() {
  25 |         const hasObjects = true;
 >26 |         return {hasObjects ? (<p> Objects </p>) : (<p>No objects are available.</p>)}
     |                            ^
  27 |     }
  28 |

我编译browserify src/index.js -o static/js/bundle.js -t [ babelify --presets [ env react ] ]

我的 .bablerc 是：

{
     "plugins": [
         "react-html-attrs",
     ]
}

react 的文档表明条件是条件渲染的有效选项，所以我认为这是一个browserify问题。我可以设置什么选项来编译这个文件？

4

2 回答 2

2

您不需要将表达式包装在 中{...}，仅当在 JSX 中将表达式作为子项传递时才需要。当您将大括号留在那里时，JavaScript 认为您正在返回一个对象。

只需卸下大括号：

render() {
  const hasObjects = true;
  return hasObjects ? (<p> Objects </p>) : (<p>No objects are available</p>);
}
于 2018-03-30T16:54:03.040 回答
0

无需将表达式包装在 {...}
您可以将代码更改为：
render() { const hasObjects = true; return hasObjects ? (<p> Objects </p>) : (<p>No objects are available</p>); } 这将起作用。

于 2018-03-30T16:58:55.090 回答