|
現(xiàn)在的需求是要打印出0這個數(shù)字
// 1. 可以使用React.createElement這個函數(shù)去實(shí)現(xiàn) // 它目前接收三個參數(shù), /* 1. 元素名稱 (div, button,span ......) 2. 元素class 使用 className聲明 3. 元素內(nèi)容 */ const App1 = React.createElement('div',{className:'red'},0) // 然后在 React中渲染一下,使用Render函數(shù)即可 /* render函數(shù)目前接收兩個參數(shù) 1. 需要渲染的框架 2. 需要掛載的元素 */ ReactDOM.render(App1,document.getElementById('root'))
現(xiàn)在我們改動一下，再生成一個按鈕試圖讓0可以+1
let n = 0 const App1 = React.createElement('div',{className:'red'},[n, React.createElement('button',{onClick:() => { n+= 1 }},"+1") ]) ReactDOM.render(App1,document.getElementById('root'))
然而當(dāng)我們點(diǎn)擊的時(shí)候n的顯示還是n，使用log可以發(fā)現(xiàn)其實(shí)n的值是變更了的，這就涉及到一個js的基礎(chǔ)知識6個6，
我們只需要吧當(dāng)前函數(shù)封裝一下，并且在click事件中再次render即可
let n = 0 const App1 = ()=> React.createElement('div',{className:'red'},[n, React.createElement('button',{onClick:() => { n+= 1 ReactDOM.render(App1(), document.getElementById('root') ) }},"+1") ]) ReactDOM.render(App1(),document.getElementById('root')) 注：在js中引入css的方法可以使用 import './xxx.css'
如果每一個簡單的點(diǎn)擊按鈕都去這么做這將會是一個龐大的工程，不過幸好React擁有JSX
// 我們只需要把 React.createElement 去掉就可以了 // 注意一定要加上return() const App = ()=>{ return( <div className="red"> {n} </div> ) } JSX語法會自動翻譯當(dāng)前語法，如果想在div中插入js語句需要在js語句外面包裹{ }
// 最后在render中使用 <App /> 渲染就可以了 const render = () => (ReactDOM.render(<App/>, document.getElementById('root') )) render() 控制語句
在Vue中我們只需要使用 v-if , v-else 在React中我們可以這樣
let n = 0 const App = ( )=>{ return( <div> { n===0 ? <div>我被顯示了</div> : <div>我被隱藏了</div> } </div> ) }
甚至可以寫成 if else
let a if(ture){ a = <div>...</div> }else{ a = ... } renturn a 循環(huán)語句
在Vue中我們可以使用 v-for ,而在React中我們要
const Component = (props) =>{
props.number.map(...)
}
|
|
|
