web前端高级React - React从入门到进阶之React条件渲染

系列文章目录

第一章：React从入门到进阶之初识React
第一章：React从入门到进阶之JSX简介
第三章：React从入门到进阶之元素渲染
第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
第五章：React从入门到进阶之组件化开发及Props属性传值
第六章：React从入门到进阶之state及组件的生命周期
第七章：React从入门到进阶之React事件处理
第八章：React从入门到进阶之React条件渲染
第九章：React从入门到进阶之React中的列表与key

一、React元素的条件渲染

• 在React中，我们可以创建不同的组件来封装不同的业务逻辑，然后再根据业务需要，我们可以只渲染满足某些条件的组件
• React元素的条件渲染跟JavaScript的是一样的，也是使用运算符if语句或者条件运算符来根据条件渲染不同的组件

下面我们将以一个打招呼的小案例来展示一下React中条件渲染的基本使用

• 首先我们分别定义两个组件一个是登录状态的欢迎组件，一个是未登录状态的提示登录组件
• 最后再创建一个总的问候组件，然后根据是否已经登录（这里我们利用props属性值来模拟）来决定该渲染哪个组件

function UserGreeting(props){
   
	return <h1>欢迎您!</h1>
}

function GuestGreeting(props){
   
	return <h1>请先登录哦</h1>
}

function Greeting(props){
   
	let isLogin = props.isLogin;
	if(isLogin){
   
		return <UserGreeting />
	}
	return <GuestGreeting />
}

ReactDOM.render(
	<Greeting isLogin={
   true} />,
	document.getElementById('root')
);

运行上面的代码，页面上将会出现“欢迎您”，也就是说UserGreeting组将将会被渲染

二、元素变量

• 我们还可以通过变量来存储元素，这样可以帮助我们有条件的渲染组件的一部分，而其他的渲染部分并不会因此而改变。
• 还是基于上面的问候语案例，比如除了在页面上显示对应的问候语外，我们还想在下面添加两个按钮：登录和注销
• 当用户是登录状态时，渲染注销按钮，相反当用户是注销状态时渲染登录按钮。
• 并且我们会将这两个按钮对应的元素保存在同一个button变量中

function LoginButton(props) {
   
 return (
   <button onClick={
   props.onClick}>
     Login
   </button>
 );
}

function