一、条件渲染
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;