控制臺(tái)報(bào)錯(cuò)
為什么引用<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>控制臺(tái)會(huì)報(bào)錯(cuò)呢？報(bào)這個(gè)錯(cuò)JSXTransformer.js:5119 Uncaught Error: Parse Error: Line 7: Unexpected token ILLEGAL
TopDancer烊
2016-12-09
5 回答
舉報(bào)
0/150
提交
取消
2016-12-13
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset='UTF-8'>
?? ??? ?<title>啊啊啊</title>
?? ??? ?<!--react核心庫(kù)-->
?? ??? ?<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
?? ??? ?<!--提供與dom相關(guān)的功能-->
?? ??? ?<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
?? ??? ?<!--講JSX語(yǔ)法轉(zhuǎn)換成js語(yǔ)法-->
?? ??? ?<script src="http://static.runoob.com/assets/react/browser.min.js"></script>?? ?
?? ?</head>
?? ?<body>
?? ??? ?<!--用于裝react返回的內(nèi)容-->
?? ??? ?<div id="container"></div>
?? ??? ?<!--react語(yǔ)法形式JSX-->
?? ??? ?<script type="text/babel">
?? ??? ??? ?//定義點(diǎn)擊改變的組件函數(shù)
?? ??? ??? ?var TestClickComponent = React.createClass({
?? ??? ??? ??? ?haddleClick : function(event){
?? ??? ??? ??? ??? ?//this.refs.tip通過(guò)標(biāo)簽名字獲取函數(shù)內(nèi)部標(biāo)簽
?? ??? ??? ??? ??? ?//因?yàn)樵趓eact中的dom并不是真實(shí)的dom節(jié)點(diǎn)，所以要通過(guò)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();//阻止默認(rèn)行為
?? ??? ??? ??? ??? ?event.stopPropagation();//停止冒泡
?? ??? ??? ??? ?},
?? ??? ??? ??? ?//渲染內(nèi)容到div（id=‘container’）中
?? ??? ??? ??? ?render: function() {
?? ??? ??? ??? ??? ?return (
?? ??? ??? ??? ??? ??? ?//如果不用div包裹的話，會(huì)報(bào)錯(cuò)，會(huì)將<button><span>
?? ??? ??? ??? ??? ??? ?//視為兩個(gè)結(jié)果
?? ??? ??? ??? ??? ??? ?//ref：為標(biāo)簽起名字
?? ??? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ??? ?<button onClick={this.haddleClick}>
?? ??? ??? ??? ??? ??? ??? ??? ?顯示|隱藏
?? ??? ??? ??? ??? ??? ??? ?</button>
?? ??? ??? ??? ??? ??? ??? ?<span ref="tip">內(nèi)容</span>
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?);
?? ??? ??? ??? ?}
?? ??? ??? ?});
?? ??? ??? ?var TestInputComponent = React.createClass({
?? ??? ??? ??? ?//組件初始化默認(rèn)值
?? ??? ??? ??? ?getInitialState : function(){
?? ??? ??? ??? ??? ?return{
?? ??? ??? ??? ??? ??? ?inputContent: ''
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?changeHandler:function(event){
?? ??? ??? ??? ??? ?//修改內(nèi)部組件的默認(rèn)值
?? ??? ??? ??? ??? ?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)用組件（第一個(gè)參數(shù)是react.
?? ??? ??? ?//element,第二個(gè)參數(shù)是document我們要傳入進(jìn)去的dom節(jié)點(diǎn)）
?? ??? ??? ?ReactDOM.render(
?? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ?<TestClickComponent/>
?? ??? ??? ??? ??? ?<br/><br/><br/>
?? ??? ??? ??? ??? ?<TestInputComponent/>
?? ??? ??? ??? ?</div>,
?? ??? ??? ??? ?document.getElementById('container')
?? ??? ??? ?);
?? ??? ?</script>
?? ?</body>
</html>
2016-12-25
在新版的react中,封裝的React.findDOMNode()方法已經(jīng)是無(wú)效的了,會(huì)報(bào)not a function?
改成this.refs.xxxx 直接指向DOM節(jié)點(diǎn)本身,所以如果使用新版本的react的同學(xué),上面的
var tipE = React.findDOMNode(this.refs.tip) 改成 var tipE = this.refs.tip; 就可以了
2016-12-14
謝謝大家的幫忙，問(wèn)題解決了
2016-12-09
我想說(shuō)是我的問(wèn)題還是資源的問(wèn)題呢，我也是復(fù)制的
2016-12-09
應(yīng)該是JS錯(cuò)了吧，我復(fù)制過(guò)來(lái)引用就沒(méi)報(bào)錯(cuò)。 ??
從官網(wǎng)上下載的DEMO引用這三個(gè)文件，也可以。
????<script src="https://unpkg.com/react@latest/dist/react.js"></script>
? ? <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
? ? <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>