React conditions rendering and rendering list

react conditional rendering or rendering list is essentially the content to be rendered is placed in a variable, and then to render the output variable

Conditions rendering

Ternary operator can be used, or if conditionals

render (){
	let info = this.props.status ? 
		<p>我是true</p>
	:
		<p>我是false</p>
	;
	return (
		<div>
			{info}
		</div>
	);
}

Rendering list

Loop can use ordinary map or the like functions

render(){
	let list = this.props.lists.map((list,index)=>{
		return (
			<li>list.name</li>
		);
	})
	return (
		<div>
			<ul>{list}</ul>
		</div>
	);
}

Guess you like

Origin blog.csdn.net/wang19970228/article/details/95233907