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

前言：

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