React: 条码渲染 & 渲染列表

一、条件渲染

1、定义：根据不同的情况显示不同的内容（就像vue中的v-if)。
2、在 React 中，可以使用 JavaScript 的 if 语句、&& 和 ? : 运算符来选择性地渲染 JSX。
2.1 使用条件判断（if）

export default function Home() {
	const spanDom = null;
	if ( activeIndex === 1) {
		spanDom = (<span>如果activeIndex等于1，这里就显示，否则不显示</span>);
	}
	return (
		<div>
			<span>这里一直显示</span>
			{ spanDom }
		</div>
	);
}

2.2 使用与运算符（&&）

export default function Home() {
	return (
		<div>
			<span>这里一直显示</span>
			{ activeIndex === 1 && (<span>如果activeIndex等于1，这里就显示，否则不显示</span>) }
		</div>
	);
}

2.3 使用三目运算符（? :）

export default function Home() {
	return (
		<div>
			<span>这里一直显示</span>
			{ activeIndex === 1 ? (<span>如果activeIndex等于1，这里就显示，否则不显示</span>) : null }
		</div>
	);
}

二、渲染列表

1、定义：通过遍历渲染成多个相似的组件(相当于vue中的v-for)。
2、在 React 中，使用map把数组转换成组件数组。

 const menuList= [
 	{menuCode:'1',menuName:'菜单1'},
 	{menuCode:'2',menuName:'菜单2'}
 ];
const MenuListDom = menuList.map(item=>{
   return (
     <div className='ce-flex-between '>
       <span>{item.menuName}</span>
       <img alt="" src=""/>
     </div>
   );
 });
const Header = () => {
 	<div>
		 { MenuListDom }
	</div>
 };
export default Header;