Reactjs控制台错误:“组件对象已停用"& "ReferenceError:未定义require" [英] Reactjs console errors: 'Components object is deprectated' & 'ReferenceError: require is not defined'
问题描述
我正在尝试将jsx与类一起使用，以创建一个简单的hello world程序以在浏览器(firefox)中打印"Hello world". 我可以得到一个页面[带有嵌入式jsx的html] [1]来工作.但是当我尝试使用类时却没有.
I'm trying to use jsx with classes create a simple hello world program to print 'Hello world' in my browser(firefox). I can get a single page [html with embedded jsx][1] to work. But not when I try to use classes.
我在控制台输出
Download the React DevTools for a better development experience: https://fb .me/react-devtools
You might need to use a local HTTP server (instead of file://): https://fb .me/react-devtools-faq react-dom.development.js:21347:9
unreachable code after return statement[Learn More]
babel.js:61389:2
You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/ babel.js:61666:4
The Components object is deprecated. It will soon be removed. index.html
ReferenceError: require is not defined[Learn More]
<anonymous> file:///Users/Jacob/temp/index.html:5
run https://unpkg.com/babel-standalone@6.26.0/babel.js:61531
check https://unpkg.com/babel-standalone@6.26.0/babel.js:61597
loadScripts https://unpkg.com/babel-standalone@6.26.0/babel.js:61624
onreadystatechange https://unpkg.com/babel-standalone@6.26.0/babel.js:61549
jsx/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class NavBar extends React.Component {
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(<NavBar />, document.querySelector('#root'))
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<!--
<script data-main="scripts/main" src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> #caused other errors
-->
<meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="root"></div>
<script type='text/babel' src='jsx/index.js'></script>
</body>
</html>
推荐答案
firefox中针对您的问题的快速修复方法是将jsx/index.jsx更改为
A quick fix in firefox for your problem would be to change your jsx/index.jsx to
class NavBar extends React.Component {
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(<NavBar />, document.querySelector('#root'))
即删除'import'
通过此以与babel-standalone一起使用babel.
Go through this for babel usage with babel-standalone.
当您使用babel-standalone时，最好将代码更改为
As you are using babel-standalone it would be best if you change your code to
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<!--
<script data-main="scripts/main" src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> #caused other errors
-->
<meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="root"></div>
<script type='text/babel'>
class NavBar extends React.Component {
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(<NavBar />, document.querySelector('#root'))
</script>
</body>
</html>
这篇关于Reactjs控制台错误:“组件对象已停用"& "ReferenceError:未定义require"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
