第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

React使用ES6語法重構(gòu)組件代碼

標(biāo)簽:
JavaScript

首次使用react,要注意react不同版本库,是ES5还是ES6的写法,如何做到统一。下面对于ES6语法重构组件的代码如下:
(1)原始代码:

<script type="text/babel">
var destination=document.querySelector("#root");
var LightningCounter=React.createClass({
getInitialState:function(){
return {
strickes:0
}
},
timeTricks:function(){
this.setState({
strickes:this.state.strickes+100
});
},
componentDidMount:function(){
setInterval(this.timeTricks,1000)
},
render:function(){
return <h1>{this.state.strickes}</h1>;
}
});
var LightningCounterDisplay=React.createClass({
render:function(){
var distyle={
width:250,
height:250,
textAlign:"center",
backgroundColor:"black",
color:"#CCC",
borderRadius:10,
webkitFilter:"drop-shadow(0px 0px 5px #666)"
};
return <div style={distyle}>
<LightningCounter/>
</div>;
}
});

    ReactDOM.render(        &lt;LightningCounterDisplay/&gt;,        destination);&lt;/script&gt;

(2)重构后的代码:

<script type="text/babel">
var destination=document.querySelector("#root");

class LightningCounterDisplay extends React.Component{                render(){            var distyle= {                width:250,                height:250,                textAlign:"center",                backgroundColor:"black",                color:"#CCC",                borderRadius:10,                webkitFilter:"drop-shadow(0px 0px 5px #666)"            };            return &lt;div style={distyle}&gt;            &lt;LightningCounter/&gt;            &lt;/div&gt;;        }}    class LightningCounter extends React.Component{            constructor(props){                super(props);                this.state={                    numtricks:0                }                this.timeTotalTrick = this.timeTotalTrick.bind(this);                  //最关键的一句是,bind让实例化的组件任何                // 地方都能调用该函数,并且函数内部的this指向实例化的组件            }            timeTotalTrick(){                this.setState({                    numtricks:this.state.numtricks+100                })            }            componentDidMount(){                setInterval(this.timeTotalTrick,1000)            }            render(){                return &lt;div&gt;{this.state.numtricks}&lt;/div&gt;;            }    }    ReactDOM.render(&lt;LightningCounterDisplay/&gt;,destination);&lt;/script&gt;

點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消