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>

相关阅读:
hibernate -- 分页模糊查询中setParameter 和setParameterList
HTTP协议状态码详解（HTTP Status Code）
远程桌面全屏显示
将中文标点符号替换成英文标点符号
MySQL 三种关联查询的方式: ON vs USING vs 传统风格
java如何遍历map的所有的元素（各种方法）
JS处理Cookie
js追加子元素
JAVA编程思想(2)
1047. Student List for Course (25)

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