Question

我知道之前已经提出这个问题，但建议的解决方案对我没有帮助，所以，这里的代码由于某种原因失败了。

app.js：

(function(React, _) {
    var App = require('./components/App.react');

_.mixin(_.string.exports());

var render = function() {
    React.render(
        React.createElement(App),
        document.getElementById('reactContent')
    );
};
render();
}(React, _));

然后，App.react.js：

var React = require('react');
var Test = React.createClass({
render: function() {
    return <div>Hello world</div>
}
})

module.exports = Test;

现在，我的控制台说：

Warning: This JSX uses a plain function. Only React components are valid in     React's JSX transform.
app.js:20281 Warning: Something is calling a React component directly. Use a     factory or JSX instead. See: http://fb.me/react-legacyfactory
app.js:6475 Uncaught TypeError: Cannot read property '__reactAutoBindMap' of null

感觉就像最简单的事情......我将包括我的package.json，只是需要它。

{
  "name": "app",
  "version": "0.0.1",
  "devDependencies": {
"gulp": "3.8.10",
"gulp-run": "1.6.5",
"gulp-less": "2.0.1",
"gulp-concat": "2.4.3",
"gulp-uglify": "1.0.2",
"gulp-minify-css": "0.3.11",
"gulp-jshint": "1.9.0",
"browser-sync": "1.8.2",
"browserify": "3.44.2",
"vinyl-source-stream": "1.0.0",
"vinyl-buffer": "1.0.0",
"reactify": "latest",
"underscore": "^1.7.0",
"del": "1.1.1",
"envify": "~3.0.0"
  },
  "paths": {
"less": "assets/less/*.less",
"js": "./app/**/*.js",
"jsx": "./app/**/*.jsx",
"app": "./app/app.js",
"html": "*.html"
  },
  "dest": {
    "style": "style.css",
    "app": "app.js",
    "dist": "dist"
  },
  "dependencies": {
"react": "latest",
"underscore": "^1.7.0",
"flux": "^2.0.0"
  }
}

从.json文件中可以看到，还有更多内容，我只是重新构建了一个非常简单的代码并将问题隔离开来。

有什么想法吗？

Answer 1

我认为您需要React.createFactory(require('./components/App.react'))，如下所述：https://gist.github.com/sebmarkbage/d7bce729f38730399d28

或使用ES6课程：https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

编辑：我找到了原帖博客：https://facebook.github.io/react/blog/2014/10/14/introducing-react-elements.html

React.js无法读取属性＆＃39; __ reactAutoBindMap＆＃39; null

1 个答案: