React应用程序错误'未捕获的ReferenceError:React未定义'
React App Error 'Uncaught ReferenceError: React is not defined'
我正试图使用react构建一个应用程序,但它不起作用,我不明白为什么。所有东西都使用babelify进行编译,但它在执行过程中抛出异常。错误如下:未捕获的ReferenceError:React未定义。
这是我的组件文件(BigCard.jsx):
export var BigCard = React.createClass({
render: function() {
var rows = [];
for (var variable in this.props.pokemon) {
if (this.props.pokemon.hasOwnProperty(variable) && variable.toString() !== 'id' && variable.toString !== 'name' && variable.toString !== 'image' && variable.toString !== 'types') {
rows.push(
<tr>
<td class='mdl-data-table__cell--non-numeric'>
{variable}
</td>
<td>
{this.props.pokemon[variable]}
</td>
</tr>
)
}
}
return (
<div class='mdl-card mdl-shadow--4dp'>
<div class='mdl-card__title'>
<img src={this.props.pokemon.image.src} alt='Pokemon' class='bigCard__img'/>
</div>
<h2 class='mdl-card__title-text'></h2>
<div class='mdl-card__supporting-text'>
<table class='mdl-data-table mdl-js-data-table'>
<thead>
<tr>
<th class='mdl-data-table__cell--non-numeric'>Type</th>
<th class='mdl-data-table__cell--non-numeric'>{this.props.pokemon.types}</th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
</div>
</div>
);
}
});
我的主文件(main.js):
import React from 'react';
import ReactDOM from 'react-dom';
import * as DataLogic from './modules/data-logic.js';
import SmallCard from './components/SmallCard.jsx';
import BigCard from './components/BigCard.jsx';
//Test Method
DataLogic.getPokemonById(3).then((result) => {
ReactDOM.render(
<BigCard pokemon={result} />,
document.getElementById('bigCard')
);
}).catch((error) => console.log(`${error} in main.js`));
我的grunt设置文件(grunfile.js)(我删除了大部分命令,所以这里看起来更小,但该文件一切正常):
'use strict'
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('./package.json'),
watch: {
babelify: {
files: ['./scripts/**/*.js','./blocks/**/*.js','./scipts/components/*.jsx'],
tasks: ['browserify']
},
},
eslint: {
options: {
format: require('eslint-tap'),
configFile: '.eslintrc'
},
target: './scripts/**/*.js'
},
browserify: {
dist: {
options: {
transform: [
['babelify', {
presets: ['es2015','react']
}]
],
browserifyOptions: {
debug: true
},
exclude: ''
},
files: {
'./build/main.js': ['./scripts/**/*.js','./blocks/**/*.js','./scipts/components/*.jsx']
}
}
}
});
grunt.registerTask('default', ['browserify', 'eslint', 'jade', 'sass', 'cssmin','uglify','watch']);
};
还有我的包文件(package.json)(我也删除了大部分引用,但最重要的是它们):
{
"name": "Pockedex",
"version": "0.1.0",
"dependencies": {
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.5.0",
"babelify": "^7.2.0",
"react": "^0.14.7",
"react-dom": "^0.14.7"
},
"devDependencies": {
"babel-preset-es2015": "6.3.x",
"babelify": "7.2.x",
"eslint-tap": "1.1.x",
"grunt": "^0.4.5",
"grunt-babel": "6.0.x",
"grunt-browserify": "^4.0.1",
"grunt-contrib-concat": "^1.0.0",
"grunt-eslint": "^17.3.2",
"load-grunt-tasks": "3.4.x"
}
}
也许,这个错误很明显,但我就是看不出来。你能帮我吗?
在BigCard.jsx 中添加import React from 'react'
每个使用react的文件都需要包含import语句。
相关文章:
- React重新渲染但未显示正确的组件
- React组件等待所需道具进行渲染
- React中的数据集表示
- Webpack开发服务器和React服务器端渲染
- React Redux错误页面管理
- React ReferenceError:未定义文档
- 未捕获的ReferenceError:链接未定义React
- 使用React Router进行服务器渲染时如何避免localStorage ReferenceError
- 未捕获的ReferenceError:IndexRoute未定义-如何解决此错误以在react路由器中使用IndexRo
- React应用程序错误'未捕获的ReferenceError:React未定义'
- 将 React 与 Nashorn 一起使用会抛出“ReferenceError: 'console' is not d
- Meteor/React:ReferenceError:require未定义/错误:找不到模块
- ReferenceError: e在React应用中没有定义
- React Recharts - ReferenceError:文档未定义
- 通用React应用中的全局变量,Node抛出ReferenceError
- gulp + browserify + reactjs, Uncaught ReferenceError: React没
- 使用react-materialize时遇到错误" ReferenceError: $ is not defined "
- 为什么会抛出这个异常?未捕获的ReferenceError:未定义React
- 未捕获的ReferenceError: require在React.js中没有定义
- React, Uncaught ReferenceError: ReactDOM is not defined