React 条件渲染

最新推荐文章于 2023-04-18 20:05:46 发布

小陈小陈满眼星辰

最新推荐文章于 2023-04-18 20:05:46 发布

阅读量66

点赞数

分类专栏： React 文章标签： react 条件渲染

本文链接：https://blog.csdn.net/apple20154350217/article/details/112563204

版权

React 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

元素变量

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>React 实例</title>
	<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
	<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
	<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
	<body>
		<div id="example"></div>
		<!--type="text/babel"-->
		<script type="text/babel">
			class LoginControl extends React.Component {
				//由ES6的继承规则得知，不管子类写不写constructor，在new实例的过程对会补上constructor.
				//所以：constructor钩子函数并不是不可缺少的，子组件可以在一些情况略去。
				
				//如果组件要定义自己的state初始化状态的话，需要写在constructor钩子函数中，
				//如果用户不使用state的话，纯用props接受参数，
				//有没有constructor钩子函数都可以，可以不用constructor钩子函数
				//再者如果不使用state，那么为什么不使用  无状态组件（建议使用）
				constructor(props) {
					//可以不写constructor，一旦写了constructor，就必须在此函数中写super()。
					//此时组件才有自己的this，在组件的全局中都可以使用this关键字。
					//否则如果只是constructor而不执行super()，那么以后的this都是错的！！！
					super(props);
					
					//将函数绑定组件实例   .bind(this) 为了重新将this绑定到组件上
					this.handleLoginClick = this.handleLoginClick.bind(this);
					this.handleLogoutClick = this.handleLogoutClick.bind(this);
					
					//state的作用：state是React中组建的一个对象，React把用户界面当做是一个状态机。
					//想想他是不同状态然后渲染这些状态，可以轻松让用户界面与数据保持一致。
					//在React中，更新组件的state，会导致重新渲染用户界面（不要操作DOM）
					//简单来说就是用户界面会随着state的变化而变化。
					
					//React数据变化的方法是调用setState(data,callback).
					//这个方法会合并data到this.state，并重新渲染组件，渲染完成后，调用可选的callback回调					
					
					this.state = {isLoggedIn:false}
				}
				handleLoginClick(){
					this.setState({isLoggedIn:true});
				}
				handleLogoutClick(){
					this.setState({isLoggedIn:false})
				}
				render() {
					const isLoggedIn = this.state.isLoggedIn;
					let button;
					
					if(isLoggedIn) {
						button = <LogoutButton onClick={this.handleLogoutClick} />;
					}else{
						button = <LoginButton onClick={this.handleLoginClick} />;
					}
					
					return (
						<div>
							<Greeting isLoggedIn={isLoggedIn} />
							{button}
						</div>
					);
				}
			}
			
			function UserGreeting(props) {
		  		return <h1>欢迎回来!</h1>;
			}
			
			function GuestGreeting(props) {
			  	return <h1>请先注册。</h1>;
			}
			
			function Greeting(props) {
			  	const isLoggedIn = props.isLoggedIn;
			  	if (isLoggedIn) {
			    	return <UserGreeting />;
			  	}
			  	return <GuestGreeting />;
			}
			
			function LoginButton(props) {
			  	return (
			    	<button onClick={props.onClick}>
			      		登陆
			    	</button>
			  	);
			}
			
			function LogoutButton(props) {
			  	return (
			    	<button onClick={props.onClick}>
			      退出
			    	</button>
			  	);
			}

			ReactDOM.render(
				<LoginControl />,
				document.getElementById('example')
			);
		</script>
	</body>
</html>

与运算符 &&

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          您有 {unreadMessages.length} 条未读信息。
        </h2>
      }
    </div>
  );
}
 
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('example')
);

三目运算符

render() {
     const isLoggedIn = this.state.isLoggedIn;
     return (
        <div>
            {isLoggedIn ? (
		        <LogoutButton onclick={this.handleLogoutClick} />
            ):(
                <LoginButton onClick={this.handleLoginClick} />
            )}
        </div>
    );
}

小陈小陈满眼星辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 条件渲染

元素变量<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>React 实例</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.
复制链接

扫一扫