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>

查看全文

相关阅读:
委托(2).net 1.x中的委托
 委托(1)认识委托
 克隆对象的几种方法
 常用的去重和排序
 为更好地设计数据库,重新整理sql server数据类型
 对于数据库中表示状态或类型字段表示方法的思考
 string to byte[]
json序列化时datetime的处理方法
 dll版本冲突的解决方法
 .net中的序列化

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