美文网首页
05.条件渲染

05.条件渲染

作者: Ching_Lee | 来源:发表于2018-02-05 13:56 被阅读0次

所有的demo源码:https://github.com/Ching-Lee/react-base
在React中你可以封装不同的组件，然后根据需要，渲染其中的部分。

1.if else

demo08



点击按钮后


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Conditional Rendering</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
    //登录用户使用的组件
    class UserGreeting extends React.Component {
        constructor(props) {
            super(props);
        }

        render() {
            return <h1>Welcome back!</h1>
        }
    }
    //未登录用户使用的组件
    class GuestGreeting extends React.Component {
        constructor(props) {
            super(props);
        }

        render() {
            return <h1>Please sign up</h1>
        }
    }

    //将上面两个组件组成一个父组件
    class Greeting extends React.Component {
        constructor(props) {
            super(props);
        }

        render() {
            if (this.props.isLoggedIn) {
                return <UserGreeting/>
            }
            return <GuestGreeting/>
        }
    }
     //登录按钮
    class LoginButton extends React.Component {
        constructor(props) {
            super(props);
        }
        //要记得在这里定义onclick事件，否则父组件无法触发
        render() {
            return <button onClick={this.props.onclick}>Login</button>;
        }
    }
    //注销按钮
    class LogoutButton extends React.Component {
        constructor(props) {
            super(props);
        }
        //要记得在这里定义onclick事件，否则父组件无法触发
        render() {
            return <button onClick={this.props.onclick}>Logout</button>;
        }
    }
    //按钮父组件
    class LoginControl extends React.Component {
        constructor(props) {
            super(props);
            this.state = {isLoggedIn: false};
            this.handleLoginClick=this.handleLoginClick.bind(this);
            this.handleLogoutClick=this.handleLogoutClick.bind(this);
        }

        handleLoginClick(){
            this.setState({isLoggedIn:true});
        }

        handleLogoutClick(){
            this.setState({isLoggedIn: false});
        }

        render() {
            let button=null;
            if (this.state.isLoggedIn) {
               button = <LogoutButton onclick={this.handleLogoutClick}/>
            } else {
               button = <LoginButton onclick={this.handleLoginClick}/>
            }
            return (
                  <div>
                      <Greeting isLoggedIn={this.state.isLoggedIn}/>
                      {button}
                  </div>
            );
        }
    }

    ReactDOM.render(<LoginControl/>,document.body);
</script>

</body>
</html>

2.true&&expression

在js中true&&expression的值为expression。
false&&expression的值为false

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'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

3.true?express1 :express 2

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

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

4.阻止组件显示，只要返回null

function WarningBanner(props) {
//如果warn值为false，不显示
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true}
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

相关文章