控制臺報錯

為什么引用<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

關(guān)注問題我要回答

1454

操作

收起

5 回答

慕數(shù)據(jù)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">
?? ??? ??? ?//定義點擊改變的組件函數(shù)
?? ??? ??? ?var TestClickComponent = React.createClass({
?? ??? ??? ??? ?haddleClick : function(event){
?? ??? ??? ??? ??? ?//this.refs.tip通過標簽名字獲取函數(shù)內(nèi)部標簽
?? ??? ??? ??? ??? ?//因為在react中的dom并不是真實的dom節(jié)點，所以要通過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();//停止冒泡
?? ??? ??? ??? ?},
?? ??? ??? ??? ?//渲染內(nèi)容到div（id=‘container’）中
?? ??? ??? ??? ?render: function() {
?? ??? ??? ??? ??? ?return (
?? ??? ??? ??? ??? ??? ?//如果不用div包裹的話，會報錯，會將<button><span>
?? ??? ??? ??? ??? ??? ?//視為兩個結(jié)果
?? ??? ??? ??? ??? ??? ?//ref：為標簽起名字
?? ??? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ??? ?<button onClick={this.haddleClick}>
?? ??? ??? ??? ??? ??? ??? ??? ?顯示|隱藏
?? ??? ??? ??? ??? ??? ??? ?</button>
?? ??? ??? ??? ??? ??? ??? ?<span ref="tip">內(nèi)容</span>
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?);
?? ??? ??? ??? ?}
?? ??? ??? ?});

?? ??? ??? ?var TestInputComponent = React.createClass({
?? ??? ??? ??? ?//組件初始化默認值
?? ??? ??? ??? ?getInitialState : function(){
?? ??? ??? ??? ??? ?return{
?? ??? ??? ??? ??? ??? ?inputContent: ''
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?changeHandler:function(event){
?? ??? ??? ??? ??? ?//修改內(nèi)部組件的默認值
?? ??? ??? ??? ??? ?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>
?? ??? ??? ??? ??? ?);
?? ??? ??? ??? ?}
?? ??? ??? ?});
?? ??? ??? ?//調(diào)用組件（第一個參數(shù)是react.
?? ??? ??? ?//element,第二個參數(shù)是document我們要傳入進去的dom節(jié)點）
?? ??? ??? ?ReactDOM.render(
?? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ?<TestClickComponent/>
?? ??? ??? ??? ??? ?<br/><br/><br/>
?? ??? ??? ??? ??? ?<TestInputComponent/>
?? ??? ??? ??? ?</div>,
?? ??? ??? ??? ?document.getElementById('container')
?? ??? ??? ?);
?? ??? ?</script>
?? ?</body>
</html>