前端学习（2220）：react之jsx的样式小案例
生活随笔
收集整理的這篇文章主要介紹了
前端学习（2220）：react之jsx的样式小案例
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './App.css'
import App from './App';
import { tsPropertySignature } from '@babel/types';//<app/>js的普通對象
/*let app = < App / >let root = document.getElementById('root')let h1=<h1>helloworld<span>我是</span></h1>
{ ReactDOM.render(h1, root
); }*/
//實現(xiàn)時刻的變化
/* function clock() {let time = new Date().toLocaleTimeString()let element = ( < div > < h1 > 現(xiàn)在的時間 { time } < /h1></div > )let root = document.querySelector('#root')ReactDOM.render(element, root)
}
clock()setInterval(clock, 1000) *//* function Clock(props) {return (<div ><h1 > 現(xiàn)在的時間是 { props.date.toLocaleTimeString() } < /h1> <h2 > 這是副標題 < /h2> < /div >)}function run() {ReactDOM.render( <Clock date = { new Date }/>, document.querySelector('#root'))
}setInterval(run, 1000) */
/* let time = new Date().toLocaleTimeString()
let str = '當(dāng)前時間是:'
let element = ( <div ><span >橫著躺著 </span> <span >豎著躺著 </span></div >
)
let man = "正常"
let element2 = ( < div ><h1 > 今天是否隔離 < /h1> <h2 > {man == "發(fā)熱" ? < button > 隔離 < /button> : element} < /h2> </div >
) *//* ReactDOM.render(element, document.querySelector('#root')
) */
let color = 'bgRed'
let element5 = ( <div className = { color } >紅色的背景顏色 </div>
)
ReactDOM.render(element5, document.querySelector('#root')
)
app.css
.bgRed {background-color: aliceblue }運行結(jié)果
總結(jié)
以上是生活随笔為你收集整理的前端学习（2220）：react之jsx的样式小案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： “约见”面试官系列之常见面试题之第五十九
- 下一篇： 前端学习（2459）：账户设置