前言：
? ? ? ? 在vue中我們提供了很多標簽方法，比如用的比較多的v-for循環內容，v-if/v-show等判斷，可以直接寫在標簽中，大大提高了我們的開發效率，那么在react中有沒有類似的方法呢？我們這里來說一說。
react中沒有這種方法，但是可以用函數式的編程來完成類似的需求
1、循環元素，v-for的效果 = 我們map+函數實現
可以看到我們實際使用中，可以通過函數的返回值來實現，map循環中我們調用另一個函數，在這個函數里面，返回子級的標簽和內容，就完美的實現了一個標簽中for循環的效果
const toolbarThemeData = [] //數組// 返回dom元素
return (
<><div className="flex">{ toolbarThemeData.map(item => changeColor(item, setTheme)) }</div> </>
)// 在函數中，可以返回標簽，在標簽中可以處理數據
function changeColor(item: IThemeData, setTheme: (key: keyof IGlobalTheme, color: string) => void) {return (<div key={item.key} className="w-1/4 flex flex-col items-center"><span className="mb-1">{item.title}</span><ColorPicker defaultValue={item.value} onChange={e => setTheme(item.key, e.toHexString())} /></div>)
}2、條件判斷，類似v-if的效果，可以通過&&和三目運算來實現
&&方法：? ? {isVisible && <div>我會在 isVisible 為 true 時渲染</div>}
import { useEffect, useState } from "react";
const [isVisible , setIsVisible ] = useState(false)// 類似onload
useEffect(()=>{setTimeout(() => {setIsVisible(true)},1000)},[])return (<div>{isVisible && <div>我會在 isVisible 為 true 時渲染</div>}</div>);三目運算方法：{isAdmin ? (<AdminPanel />) : (<GuestPanel />)}
后面也可以換成函數，函數返回標簽內容就行，跟上面map一樣
return (<div>{isAdmin ? (<AdminPanel />) : newPage()}</div>);const newPage = ()=>{return(<div>哈哈哈</div>)
}3、顯示與隱藏的效果，類似v-show的效果，這個得通過動態樣式來了
直接在標簽上加樣式，或者動態改class名
return (<div style={{ display: isVisible ? 'block' : 'none' }}>我會根據 isVisible 顯示/隱藏（DOM 始終存在）</div>);
// CSS 文件
.hidden {display: none;
}// 組件
function MyComponent({ isVisible }) {return (<div className={isVisible ? '' : 'hidden'}>我會根據 isVisible 顯示/隱藏</div>);
}
