控制台报错

为什么引用<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>控制台会报错呢？报这个错JSXTransformer.js:5119 Uncaught Error: Parse Error: Line 7: Unexpected token ILLEGAL

TopDancer烊

2016-12-09

源自：React入门 3-2

关注问题我要回答

1418

操作

收起

5 回答

慕数据3637914 回答被采纳 +3 积分
2016-12-13

<!DOCTYPE html>
<html>
   <head>
       <meta charset='UTF-8'>
       <title>啊啊啊</title>
       
       <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
       
       <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
       
       <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
   </head>
   <body>
       
       <div id="container"></div>
       
       <script type="text/babel">
           //定义点击改变的组件函数
           var TestClickComponent = React.createClass({
               haddleClick : function(event){
                   //this.refs.tip通过标签名字获取函数内部标签
                   //因为在react中的dom并不是真实的dom节点，所以要通过React.
                   //findDOMNode查找
                   var tipE = React.findDOMNode(this.refs.tip);

                   if(tipE.style.display === "none"){
                       tipE.style.display = "inline";
                   }else{
                       tipE.style.display = "none";
                   };

                   event.preventDefault();//阻止默认行为
                   event.stopPropagation();//停止冒泡
               },
               //渲染内容到div（id=‘container’）中
               render: function() {
                   return (
                       //如果不用div包裹的话，会报错，会将<button><span>
                       //视为两个结果
                       //ref：为标签起名字
                       <div>
                           <button onClick={this.haddleClick}>
                               显示|隐藏
                           </button>
                           <span ref="tip">内容</span>
                       </div>
                   );
               }
           });

           var TestInputComponent = React.createClass({
               //组件初始化默认值
               getInitialState : function(){
                   return{
                       inputContent: ''
                   }
               },
               changeHandler:function(event){
                   //修改内部组件的默认值
                   this.setState({
                       inputContent:event.target.value
                   });

                   event.preventDefault();
                   event.stopPropagation();
               },
               render : function(){
                   return(
                       <div>
                           <input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>
                       </div>
                   );
               }
           });
           //调用组件（第一个参数是react.
           //element,第二个参数是document我们要传入进去的dom节点）
           ReactDOM.render(
               <div>
                   <TestClickComponent/>
                   <br/><br/><br/>
                   <TestInputComponent/>
               </div>,
               document.getElementById('container')
           );
       </script>
   </body>
</html>