當(dāng)前位置：首頁 >

state的简写方式

發(fā)布時間：2024/9/27 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 state的简写方式小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

<!DOCTYPE html>

<html>

<head>

? ? <meat charset="UTF-8">

? ? ? ? <title>state的簡寫方式</title>

</head>

<body>

? ?

? ? <div id="test"></div>

? ?

? ? <script type="text/javascript" src="../js/react.development.js"></script>

? ?

? ? <script type="text/javascript" src="../js/react-dom.development.js"></script>

? ?

? ? <script type="text/javascript" src="../js/babel.min.js"></script>

? ?

? ? <script type="text/babel">

? ? ? ? //1.創(chuàng)建組件

? ? ? ? class Weather extends React.Component{

? ? ? ? ? ? //初始化狀態(tài)

? ? ? ? ? ? state = { isHot: false, wind: '微風(fēng)' } ?

? ? ? ? ? ?render(){ ? ? ? ? ? ? ?

? ? ? ? ? ? ? ?const {isHot,wind} =this.state; ? ? ? ?

? ? ? ? ? ? ? ?return <h1 onClick={this.changeWeather}>今天天氣很{isHot ? '炎熱' : '涼爽'},{wind}</h1>

? ? ? ? ? ?} ? ?

? ? ? ? ? //自定義方法————要用賦值語句的方式+箭頭函數(shù)

? ? ? ? ? ? changeWeather = ()=> { ? ? ? ? ?

? ? ? ? ? ? ? ? const isHot=this.state.isHot ? ? ? ? ? ?

? ? ? ? ? ? ? ? this.setState({isHot:!isHot})

? ? ? ? ? ? }

? ? ? ? } ?

? ? ? ? //2.渲染組件到頁面

? ? ? ? ReactDOM.render(<Weather />, document.getElementById('test')); ?

? ? </script>

</body>

</html>

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的state的简写方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。