一,前言
1.react
并不像vue
专门为条件渲染和列表渲染设置特定的语法,完全遵循js
的语法
二,条件渲染方式
1.if
判断
function A(props){
let c = null
if(props.show){
c =<div>{"如果接受的props的show为true时展示"}<div>
}
return (
<div>{c}</div>
)
}
2.三目表达式
function A(props){
let c = props.show ? <div>{"如果接受的props的show为true时展示"}<div> : null
return (
<div>{c}</div>
)
}
3.&&
语法:特别注意当使用0
来作为条件时会虽然不会渲染后面的,但会渲染出一个0
function A(props){
return (
<div>{props.show && <div>{"如果接受的props的show为true时展示"}<div>}</div>
)
}
4.swich
case
:
function A(props){
let c = null
swich(props.type){
case "cat":
c =<div>{"我有一只猫"}<div>
break
case "dog":
c =<div>{"我有一只狗"}<div>
break
}
return (
<div>{c}</div>
)
}
二,列表渲染
1.使用数组的map()
方法
function A(props){
return (
<div>{[1,2,3].map(v=><span>{v}<span>)}</div>
)
}