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>
    
  • 相关阅读:
    response.redirect三种新页面转向方法
    respones.redirect 打开新的页面的两个方法
    临时表
    ODBC方式操作oracle数据库
    OLEDB方式操作oracle数据库
    oracle所有的乱码解决方案
    引用HM.Util.Ioc 的时候报错
    js webstrom中svn的配置及使用
    js vs2013中允许js访问json文件的解决方案
    Oracle 字符集常见字符集及解决方案
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13313716.html
Copyright © 2011-2022 走看看