Question

我无法让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问题。我可以设置什么选项来编译这个文件？

Answer 1

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

只需删除大括号：

render() {
  const hasObjects = true;
  return hasObjects ? (<p> Objects </p>) : (<p>No objects are available</p>);
}

Answer 2

无需将您的表达包装在{...}中您可以将代码更改为：
A 这将有效。

Browserify，react和条件运算符

2 个答案: