溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

封裝方法實現(xiàn)react更新元素示例

發(fā)布時間：2020-06-30 01:20:03 來源：網(wǎng)絡(luò) 閱讀：262 作者：素顏豬 欄目：開發(fā)技術(shù)

示例代碼：

<!DOCTYPE html>

<html>

<head>

<title></title>

<!--  React 的核心庫文件 -->

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<!-- 提供與 操作DOM 相關(guān)的功能庫文件 -->

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!-- 

Babel可以將ES6語法轉(zhuǎn)為ES5語法

Babel內(nèi)嵌了對JSX的支持

只在開發(fā)時學(xué)習(xí)使用，生產(chǎn)服務(wù)器上請甚用

-->

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

</head>

<body>

<!-- 定義了html的div標(biāo)簽且該標(biāo)簽的id為example -->

<div id="example"></div>


<!--

type="text/babel":告訴瀏覽器這是JSX的語法，不是JS

const element = (

<div>

<h2>hello world</h2>

<h3>現(xiàn)在時間是：{new Date().toLocaleTimeString()}</h3>

</div>

);:這里是JSX的語法格式

document.getElementById('example')：獲取html的id為example的元素對象

說明：將div元素添加到id為example的元素中，做為子元素存在，通過運行代碼查看源代碼來看到結(jié)果

-->

<script type="text/babel">

function demo(){

//創(chuàng)建元素

const element = (

<div>

<h2>hello world</h2>

<h3>現(xiàn)在時間是：{new Date().toLocaleTimeString()}</h3>

</div>

);

//渲染DOM

ReactDOM.render(

    element,

    document.getElementById('example')

);

}


//定時調(diào)用

//demo:函數(shù)名

//1000:每間隔一秒調(diào)用一次demo函數(shù)

setInterval(demo,1000);

</script>

</body>

</html>

代碼截圖：

封裝方法實現(xiàn)react更新元素示例

封裝方法實現(xiàn)react更新元素示例

封裝方法實現(xiàn)react更新元素示例

運行截圖：

封裝方法實現(xiàn)react更新元素示例

右擊查看源碼截圖：

封裝方法實現(xiàn)react更新元素示例

封裝方法實現(xiàn)react更新元素示例

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手