Chrome 中的 JSX/JavaScript 语法答案

【问题标题】：JSX/JavaScript syntax in ChromeChrome 中的 JSX/JavaScript 语法
【发布时间】：2015-05-18 21:18:18
【问题描述】：

这真的很愚蠢，但我在 Chrome 上遇到了问题（在 Firefox 中运行良好），这种语法是从 react-dnd 组件中的一个示例中借用的（链接：https://github.com/gaearon/react-dnd/blob/master/examples/_dustbin-simple/Dustbin.js）。

const itemDropTarget = {
    acceptDrop(component, item) {
        component.setItem(item);
    }
};

它触发了这个错误：

Uncaught SyntaxError: Unexpected token (

Chrome 也不喜欢这样：

const DustbinSimple = React.createClass({
    render() {

一定是：

const DustbinSimple = React.createClass({
    render: function() {

我错过了什么？一定是非常基本的东西，我不明白。

提前致谢。

【问题讨论】：

【解决方案1】：

JSX 是 Javascript 的扩展。要在浏览器中实际运行它，您必须通过JSX Transformer 运行它。

【讨论】：

【解决方案2】：

我发现了问题所在... 我需要使用带有 reactify/browserify 的 --harmony 标志来编译 JSX 代码：

...
bundler.transform(["reactify", {"harmony": true}]);
...

【讨论】：

是的，如果您使用任何 ES6 功能并希望在尚不支持它们的浏览器中运行它们，您也需要将它们编译为 ES5。 harmony 标志就是这样做的。（它实际上与 JSX 没有任何关系）。

【解决方案3】：

您可以将包裹捆绑器添加到您的项目中。它会自动转换您的代码，以便浏览器可以理解

【讨论】：