条件渲染和列表渲染

一，前言

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