1、错误描述

Uncaught SyntaxError: Inline Babel script: Unexpected token_javascript

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>