react与vue的对比，来实现标签内部类似v-for循环，v-if等功能

前言：

        在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>);
}