當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

state的简写方式

發布時間：2024/9/27 编程问答 26 豆豆

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

<!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.創建組件

? ? ? ? class Weather extends React.Component{

? ? ? ? ? ? //初始化狀態

? ? ? ? ? ? state = { isHot: false, wind: '微風' } ?

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

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

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

? ? ? ? ? ?} ? ?

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

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

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

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

? ? ? ? ? ? }

? ? ? ? } ?

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

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

? ? </script>

</body>

</html>

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。