Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "React conditional rendering case Analysis". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Conditional rendering can display all the data in an array on the interface in turn, commonly used scenarios: text list, product list. Conditional rendering in React is the same as conditional statements in JavaScript. Use JavaScript operators such as if or conditional operators to create elements that render the current state, and have React update the matching UI

Let's take a look at two components:

Function UserGreeting (props) {return Welcome back!;} function GuestGreeting (props) {return please register first. ;}

We will create a Greeting component that displays one of them depending on whether the user is logged in or not:

React instance

Function Greeting (props) {const isLoggedIn= props.isLoggedIn; if (isLoggedIn) {return;} return;} ReactDOM.render (/ / attempt to modify isLoggedIn= {true}: false} / >, document.getElementById ('example')); element variable

You can use variables to store elements. It can help you conditionally render part of the component, while the rest of the output will not be changed. In the following example, we are going to create a stateful component called LoginControl. It will render or according to the current state, and it will also render the one in the previous example.

React instance

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 = null; if (isLoggedIn) {button = } else {button =;} return ({button});}} ReactDOM.render (, document.getElementById ('example')); and operator & &

You can embed any expression in JSX by wrapping code in curly braces, including JavaScript logic and & &, which can easily render an element conditionally.

React instance

Function Mailbox (props) {const unreadMessages = props.unreadMessages; return (Hello! {unreadMessages.length > 0 & & you have {unreadMessages.length} unread messages. });} const messages = ['React',' Re: React', 'Re:Re: React']; ReactDOM.render (, document.getElementById (' example'))

In JavaScript, true & & expression always returns expression, while false & & expression always returns false. Therefore, if the condition is true,&&, the element to the right will be rendered, and if it is false,React, it will be ignored and skipped.

Ternary operator

Another method of conditional rendering is to use the conditional operator of JavaScript:

Condition? True: false .

In the following example, we use it to conditionally render a small piece of text.

Render () {const isLoggedIn = this.state.isLoggedIn; return (The user is {isLoggedIn? Currently': 'not'} logged in.);}

It can also be used in larger expressions, although not very intuitive:

Render () {const isLoggedIn = this.state.isLoggedIn; return ({isLoggedIn? (): ()});} block component rendering

In rare cases, you may want to hide the component, even if it is rendered by other components. Let the render method return null instead of its render result. In the following example, rendering is based on the value of the property warn. If the value of warn is false, the component does not render:

React instance

Function WarningBanner (props) {if (! props.warn) {return null;} return ("warning" > warning!);} 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 ({this.state.showWarning? 'hide': 'show'});}} ReactDOM.render (, document.getElementById ('example'))

The return of null by the component's render method does not affect the callback of the component's lifecycle method. For example, componentWillUpdate and componentDidUpdate can still be called.

This is the end of the content of React conditional rendering instance Analysis. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.