React Conditional rendering

This is the 20th day of my participation in the Genwen Challenge

The introduction

React conditional rendering, like JavaScript, uses the JavaScript if or conditional operators to create elements that represent the current state, and then has React update the UI based on them.

• Look at the following two components

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}
Copy the code

• Create a new Greeting component that determines which of the above components to display based on whether the user is logged in.

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

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />.document.getElementById('root'));Copy the code

This example renders different greetings based on the value of isLoggedIn.

Interpretation of the

In layman’s terms React allows us to render on demand without having to render all components.

The element variables

Official description: You can use variables to store elements. It helps you conditionally render one part of a component without changing the rest of the rendering.

Interpretation of the

React allows variables to store elements and render them as needed.

• Look at the following two components

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

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}
Copy the code

Official description: Next we will create a stateful component called LoginControl. It will render according to the current state or. It will also render in the previous example.

• The following is conditional rendering using an if statement

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

ReactDOM.render(
  <LoginControl />.document.getElementById('root'));Copy the code

The and operator &&

Official description: You can embed expressions in JSX by wrapping code in curly braces. This also includes the logical and (&&) operators in JavaScript. It makes it easy to conditionally render elements.

{unreadMessages.length > 0 &&
    <h2>
      You have {unreadMessages.length} unread messages.
    </h2>
}
Copy the code

• Why can I write that?

This is possible because in JavaScript, true && expression always returns expression, and false && expression always returns false.

• Selected case

render() {
  const count = 0;
  return (
    <div>
      { count && <h1>Messages: {count}</h1>}
    </div>
  );
}
Copy the code

Interpretation of the

Official description: Note that expressions that return false skip the element after &&, but return false expressions. In the following example, the render method returns <div>0</div>.

Ternary operator

• The instance

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

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

Official tip: Extract components if conditions are too complex.

Blocking conditional rendering

Official description: To do this, you can have the Render method return NULL without doing any rendering. In the following example, conditional rendering is performed based on the values of WARN in prop. If warn is false, the component will not render:

function WarningBanner(props) {
  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(state= > ({
      showWarning: !state.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'));Copy the code

Official note: Returning NULL in the render method of a component does not affect the lifecycle of the component. For example, in the example above, componentDidUpdate is still called.

Learn React!