React學習筆記（七）條件渲染

React學習筆記（七）

6、條件渲染

使用if或條件運算符來建立表示當前狀態的元素。

• 能夠使用變量來存儲元素。好比：

let button = null;
if (isLoggedIn) {
    button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
    button = <LoginButton onClick={this.handleLoginClick} />;
}

• 與（&&）運算符

能夠經過用花括號包裹代碼在JSX中嵌入任何表達式。

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')
);

• 三目運算符

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

• 阻止組件渲染

讓render方法返回null就能夠實現隱藏組件。
組件的render方法返回null並不會影響該組件生命週期方法的回調。

function WarnTip(props) {
  const isShow = props.isShow;
  if (!isShow) {
    return null;
  }
  
  return (
    <div className="wran-tip">FBI WARNING</div>
  );
}

class ToggleWarn extends React.Component {
  constructor(props) {
    super(props);
   
    this.state = {
      isShow: false
    };
  }
  
  render() {
    return (
      <div>
        <WarnTip isShow={this.state.isShow} />
        <button type="button" onClick={this.toggle.bind(this)}>
          { this.state.isShow ? 'Hide' : 'Show' }
        </button>
      </div>
    )
  }
  
  toggle() {
    this.setState(prev => ({
      isShow: !prev.isShow
    }));
  }
}

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

The end... Last updated by: Jehorn, April 22, 2019, 3:32 PM