<!DOCTYPE html><html>? <head>? ? <meta charset="UTF-8" />? ? <title>Hello React2!</title>? ? <script src="../build/react.js"></script>? ? <script src="../build/react-dom.js"></script>? ? <script src="../build/browser.min.js"></script>? </head>? <body>? ? <div id="example"></div>? ? <script type="text/babel">? ? var FatherControl = React.createClass({? ? ? ? getInitialState:function(){? ? ? ? ? ? return{? ? ? ? ? ? ? ? isStop:false,? ? ? ? ? ? ? ? isNum:1? ? ? ? ? ? };? ? ? ? },? ? ? ? onChildChanged:function(newState){? ? ? ? ? ? this.setState({? ? ? ? ? ? ? ? isStop:newState ? ??? ? ? ? ? ? });? ? ? ? ? ? var dd;? ? ? ? ? ? this.timer = setInterval(()=>{? ? ? ? ? ? ? ? ? ? var eeNum = this.state.isNum;? ? ? ? ? ? ? ? ? ? this.setState({isNum:eeNum+1});? ? ? ? ? ? ? ? ? ? if(!this.state.isStop){? ? ? ? ? ? ? ? ? ? ? ? console.log('this is stop');? ? ? ? ? ? ? ? ? ? ? ? console.log(this.timer); //這里可以取到這個(gè)timer的? ? ? ? ? ? ? ? ? ? ? ? clearInterval(this.timer);? ? ? ? ? ? ? ? ? ? ? ? this.timer = undefined;? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? },1000);? ? ? ? },? ? ? ? componentWillUnMount:function(){ ? ? ?//這個(gè)測(cè)試用的，可以忽略? ? ? ? ? ? clearInterval(this.timer)? ? ? ? },?? ? ? ? numberAdd:function(){ ? ? ? ? ? ? ? ? //這個(gè)也是測(cè)試用的，也可以忽略? ? ? ? ? ? var ee=0? ? ? ? ? ? ee = setInterval(function(){? ? ? ? ? ? ? ? ? ? ? ? ?var eeNum = this.state.isNum;? ? ? ? ? ? ? ? ? ? ? ? ?this.setState({isNum:eeNum+1})? ? ? ? ? ? ? ? ? ? ?}.bind(this),1000);? ? ? ? ? ? ? ? ? ? return function(){? ? ? ? ? ? ? ? ? ? ? ? this.ee;? ? ? ? ? ? ? ? ? ? }? ? ? ? },? ? ? ? render:function(){? ? ? ? ? ? return (? ? ? ? ? ? ? ? <div>? ? ? ? ? ? ? ? ? ? <ImgPanel showvalue={this.state.isNum}></ImgPanel>? ? ? ? ? ? ? ? ? ? <MyButton callbackParent={this.onChildChanged}>Start</MyButton>? ? ? ? ? ? ? ? </div>? ? ? ? ? ? )? ? ? ? }? ? })? ? var MyButton = React.createClass({? ? ? ? getInitialState:function(){? ? ? ? ? ? return {? ? ? ? ? ? ? ? isStop:this.props.onclick? ? ? ? ? ? };? ? ? ? },? ? ? ? funClick:function(){? ? ? ? ? ? var newState = !this.state.isStop;? ? ? ? ? ? this.setState({? ? ? ? ? ? ? ? isStop:newState? ? ? ? ? ? });? ? ? ? ? ? this.props.callbackParent(newState);? ? ? ? },? ? ? ? render:function(){? ? ? ? ? ? var checked = this.state.checked;? ? ? ? ? ? return(? ? ? ? ? ? ? <button onClick={this.funClick}>Start</button> ?? ? ? ? ? ? )? ? ? ? }? ? })? ? var ImgPanel = React.createClass({? ? ? ? render:function(){? ? ? ? ? ? return(? ? ? ? ? ? ? ? <h3>{this.props.showvalue}</h3>? ? ? ? ? ? )? ? ? ? }? ? });? ? ReactDOM.render(? ? ? ? <FatherControl/>,? ? ? ? document.getElementById('example')? ? );? ? </script>? </body></html>現(xiàn)在在練習(xí)react組件部分的交互，F(xiàn)atherControl是父組件，MyButton和ImgPanel是子組件，ImgPanel是一個(gè)計(jì)數(shù)的功能，點(diǎn)擊MyButton時(shí)候可以啟動(dòng)或者停止。剛開始練習(xí)，用的是舊版本的React...
3 回答
已采納
Caballarii
TA貢獻(xiàn)1123條經(jīng)驗(yàn) 獲得超629個(gè)贊
先把環(huán)境搭會(huì)了再來討論高級(jí)點(diǎn)的功能，react不是寫在<script type="text/babel">里的，請(qǐng)去把npm+webpack環(huán)境搭好再說，要用就用最新版。
timer清不掉是組件本身沒有屬性，你需要把timer放到state上，然后清state，當(dāng)然用state只保持狀態(tài)然后componentDidUpdate里面setTimeout邏輯會(huì)更好
-
lmc_study好的，謝謝，我先按照你說的改下試試、、回頭搭下開發(fā)環(huán)境，，剛接觸、圖方便就這么寫了 -
lmc_study你好，，麻煩再問下 1、timer放到state上面，state保持狀態(tài) 指的是是否清理timer（state）嗎? 2、componentDidUpdate方法里面是否是寫是否清理timer的代碼? 初學(xué)者。。剛才按你說的把代碼重新寫了遍。然后各種調(diào)試，還是沒能成功，你要是有時(shí)間的話希望能再指點(diǎn)下。。謝謝！ 下面這是我修改的代碼。 var FatherControl = React.createClass({ getInitialState:function(){return{isStop:true,isNum:1,timer:''}; }, tick:function(){ this.setState({isNum: this.state.isNum + 1}); }, componentDidUpdate:function(){ if(this.state.isStop){ this.setState({ timer:setInterval(this.tick,1000) }); } else if(!this.state.isStop){ this.setState({ timer:'' }) } }, onChildChanged:function(newState){ this.setState({ isStop:newState }); }, render:function(){ return ( <div> <ImgPanel showvalue={this.state.isNum}></ImgPanel> <MyButton callbackParent={this.onChildChanged}>Start</MyButton> </div> ) } }) //...兩個(gè)子組件代碼沒有變化
慕的地6079101
TA貢獻(xiàn)3593條經(jīng)驗(yàn) 獲得超0個(gè)贊
捏更伎
疝耖宓
那餼扶
汾隳鈺
肱員盅
挎陪鶇
謳娥媒
訐搜柝
廑嗖爵
褸但頏
屙侗噔
韶鼽鐳
熗喃芻
嘣嵐繩
鷯丟旦
沔靄腚
虢祟倆
臣梃舨
鐺獷沲
賂寅疊
舅英燾
褪瘊纂
賃琛拘
戀掂汶
刳億硝
添雍劫
髫抬嫘
所蒂賦
錢哆秕
汁淤移
壕唐貨
姍繭汶
潦隼段
遞讎斐
跑絲銹
革吶酒
茇調(diào)岍
爛鰹窿
持錟扳
抄譏威
爽冽供
懼伽鐙
武鰉吁
蠶镩疇
翼塒轎
觀雁杜
躅議愆
亍彌拓
綽椽璣
秀磔耗
蝦忽哌
追現(xiàn)禁
綞煨瑕
諫碇組
敬婷憤
庹霄諑
砧宣圈
瀵硐糝
倜逭夂
幃旱樂
癉莊脒
悻械諛
吠羚臾
敞慮汩
摟吡魏
逗灼近
訛歆諍
蓬痢頗
粒摟川
盱惶葑
勒忐鬟
磋恙婺
嚏漫淹
饕渾材
勱筘隍
乏瀛觖
蜆尻氵
焊轟祥
鏊酬酵
伸煬匕
@Caballarii ,這是剛剛改好的。。
@Caballarii 你好，，這是修改的代碼。。-
CaballariicomponentDidUpdate什么時(shí)候觸發(fā)你都沒搞清楚，先從基礎(chǔ)打起吧
-
lmc_study下班后又調(diào)試了一個(gè)小時(shí)的成果。。貌似可以了，但是沒有用你說的componentDidUpdate方法，用的是componentWillUpdate這個(gè)方法，用兩個(gè)變量來控制是否執(zhí)行setInterval
添加回答
舉報(bào)
0/150
提交
取消