zoukankan html css js c++ java

Uncaught SyntaxError: Inline Babel script: Unexpected token

1、错误描述

2、错误原因

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/react.development.js" ></script>
		<script type="text/javascript" src="../js/react-dom.development.js" ></script>
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<div id="animal"></div>
		<script type="text/babel">
			class Animal extends React.Component{
				render(){
					return{
						<label style={{fontSize:this.props.fontSize+"px",color:this.props.fontColor}}>{this.props.name}</label>
					};
				}
			}
			
			Animal.defaultProps = {
				name:'猫',
				fontSize:100,
				fontColor:'#FF8899'
			}
			
			ReactDOM.render(
				<Animal/>,
				document.getElementById('animal')
			)
		</script>
	</body>
</html>

在定义类Animal时，render方法中的return后面需要使用小括号，而不是大括号

3、解决办法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/react.development.js" ></script>
		<script type="text/javascript" src="../js/react-dom.development.js" ></script>
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<div id="animal"></div>
		<script type="text/babel">
			class Animal extends React.Component{
				render(){
					return(
						<label style={{fontSize:this.props.fontSize+"px",color:this.props.fontColor}}>{this.props.name}</label>
					);
				}
			}
			
			Animal.defaultProps = {
				name:'猫',
				fontSize:100,
				fontColor:'#FF8899'
			}
			
			ReactDOM.render(
				<Animal/>,
				document.getElementById('animal')
			)
		</script>
	</body>
</html>

查看全文

相关阅读:
程序员如何跨过自我推销的难关？
常用接口分类与模块设计的方法
 如何设计分层架构和交互接口 API ?
如何建立架构师的立体化思维？
从程序员到架构师的技能图谱
 selenium鼠标、键盘操作常用API
selenium元素定位之-css定位
 python每日一练之集合set
selenium2简单的定位方法和Xpath定位
 python之元组

原文地址：https://www.cnblogs.com/hzcya1995/p/13313716.html