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>

查看全文

相关阅读:
Bootstrap的介绍和响应式媒体查询
 jquery内容补充
 jquery的ajax
jquery的事件
 JQuery的筛选方法
 jquery的css
jQuery的文档操作
 操作表单域中的value值
 jquery的属性操作
 jquery的效果

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