Question

使用带有React-Dom导入的ES6 Javascript的React，并且Browerify脚本运行babel将ES6 / JSX转换为支持浏览器的js文件。但是，它仅适用于组件文件的非反应式版本。您将在下面看到两个App.js文件。一个是与脚本配合使用的版本，另一个是在控制台中显示错误的版本。

Package.json依赖项

"dependencies": {
    "react": "^0.12.2",
    "react-dom": "^16.4.1"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^5.0.5",
    "browserify": "^6.0.3",
    "envify": "^3.2.0",
    "grunt": "^0.4.5",
    "grunt-browserify": "^3.8.0",
    "grunt-cli": "^1.2.0",
    "grunt-react": "^0.10.0",
    "reactify": "^1.0.0",
  }

Gruntfile.js脚本

   browserify: {
            dev: {
                files: {
                    'build/app.js': ['js/app.jsx']
                },
                options: {
                    transform: [
                        'babelify', 'reactify'
                    ]
                },
            }
        },

App.jsx（可以正常工作的版本）

import React from 'react';

var App = React.createClass({
    render: function () {
        return (
      <div>Hellow World</div>
        );
    }
});

React.render(<App></App>, document.getElementById('app'));

App.jsx（这是中断版本）

import React from 'react';
import ReactDom from 'react-dom';

class HelloWorld extends React.Component {
  render() {
    return (
      <div>Hello World!</div>
    )
  }
}

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

Console.log错误

Uncaught TypeError: Cannot read property 'ReactCurrentOwner' of undefined

Grunt Babelify脚本失败，并带有react-dom javascript导入

0 个答案: