zoukankan      html  css  js  c++  java
  • 6、ReactJs基础知识06--条件渲染

    1、函数式组件的条件渲染
          function UserGreeting(props) {
            return <h1>Welcome back!</h1>;
          }
    
          function GuestGreeting(props) {
            return <h1>Please sign up.</h1>;
          }
    
          function Greeting(props) {
            const isLoggedIn = props.isLoggedIn;
            if (isLoggedIn) {
              return <UserGreeting />;
            }
            return <GuestGreeting />;
          }
    2、使用变量存储组件
    function LoginButton(props) {
            return (
              <button onClick={props.onClick}>
                Login
              </button>
            );
          }
    
          function LogoutButton(props) {
            return (
              <button onClick={props.onClick}>
                Logout
              </button>
            );
          }
          class LoginControl extends React.Component {
            constructor(props) {
              super(props);
              this.handleLoginClick = this.handleLoginClick.bind(this);
              this.handleLogoutClick = this.handleLogoutClick.bind(this);
              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>
              );
            }
          }
    3、使用与运算符 &&进行条件渲染
         function Mailbox(props) {
            const unreadMessages = props.unreadMessages;
            return (
              <div>
                <h1>Hello!</h1>
                {unreadMessages.length > 0 &&
                  <h2>
                    You have {unreadMessages.length} unread messages.
                  </h2>
                }
              </div>
            );
          }
          const messages = ['React', 'Re: React', 'Re:Re: React'];
        // 之所以能这样做,是因为在 JavaScript 中,true && expression 总是会返回 expression, 
          // 而 false && expression 总是会返回 false。
          // 因此,如果条件是 true,&& 右侧的元素就会被渲染,如果是 false,React 会忽略并跳过它。
    4、三目运算符
       render() {
            const isLoggedIn = this.state.isLoggedIn;
            return (
              <div>
                {isLoggedIn ? (
                  <LogoutButton onClick={this.handleLogoutClick} />
                ) : (
                  <LoginButton onClick={this.handleLoginClick} />
                )}
              </div>
            );
          }
    5、函数组件返回return null将会阻止组件的渲染
    在组件的 render 方法中返回 null 并不会影响组件的生命周期,componentDidUpdate 依然会被调用
     
     
     
  • 相关阅读:
    (转+原)python中的浅拷贝和深拷贝
    (原)torch7中添加新的层
    (原+转)ubuntu终端输出彩色文字
    (原)torch中显示nn.Sequential()网络的详细情况
    (原)python中使用plt.show()时显示图像
    eclipse 注释模板
    leetcode 11 最大盛水容器
    leetcode 9 回文数字
    leetcode8 字符串转整数
    利用Intent启动activity的例子
  • 原文地址:https://www.cnblogs.com/gopark/p/12292491.html
Copyright © 2011-2022 走看看