Browserify、React 和条件运算符

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

不需要用{...}包裹你的表情
您可以将代码更改为：
render() { const hasObjects = true; return hasObjects ? (<p> Objects </p>) : (<p>No objects are available</p>); } 这会起作用。

Browserify、React 和条件运算符

Browserify, react, and the conditional operator

reactjs

babelify