React study notes (4) conditional rendering and list rendering

React study notes (4) conditional rendering and list rendering

1. Conditional rendering

1. Conditional rendering

We can encapsulate different behaviors by creating different components, and then render part of the content in the corresponding state according to the state of the application

//Define component encapsulation login behavior class SignIn extends React . Component { constructor ( props ) { super (props) } render () { return < h1 > Please Sign In </h1 > } } //Define component package registration behavior class SignUp extends React . Component { constructor ( props ) { super (props) } render () { return < h1 > Please Sign Up </h1 > } } //Decide which component to render based on whether the user has logged in class Greeting extends React . Component { constructor ( props ) { super (props) } render () { if ( this .props.isSignUp) { return < SignIn/> } else { return < SignUp/> } } } ReactDOM.render( < Greeting isSignUp = {false}/> , document .getElementById( 'app' ) ); Copy code

2. Prevent component rendering

In some cases, we want to be able to hide elements, this time we need to let

render()
return
null
Can

class Warning extends React . Component { constructor ( props ) { super (props) } render () { if ( this .props.isWaring) { return < span > Waring! </span > } else { return null } } } ReactDOM.render( < Warning isWarning = {false}/ > , document .getElementById( 'app' ) ); Copy code

3. Element variables

We can use variables to store elements so that we can conditionally render part of the component

class LoginControl extends React . Component { constructor ( props ) { //1. Pass props super (props); //2. Initial state this .state = { isLoggedIn : false }; //3. Binding components for event handling functions examples of the this .handleLoginClick = the this .handleLoginClick.bind( this ); this .handleLogoutClick = this .handleLogoutClick.bind( this ); } handleLoginClick () { this .setState({ isLoggedIn : true }); } handleLogoutClick () { this .setState({ isLoggedIn : false }); } render () { //Use variables to store elements according to conditions let greeting; let button; if ( this .state.isLoggedIn) { greeting = < h1 > Now you are logged in! </h1 > ; button = < button onClick = {this.handleLogoutClick} > Log Out </button > ; } else { greeting = < h1 > Please log in! </h1 > ; button = < button onClick = {this.handleLoginClick} > Log In </button > ; } return ( < div > {greeting} {button} </div > ); } } ReactDOM.render( < LoginControl isLoggedIn = {false}/> , document .getElementById( 'app' ) ); Copy code

2. the list rendering

1. Rendering elements

In React components, we can pass

map()
Method to quickly render list elements, let s first look at a small example

<!DOCTYPE html> < html > < head > < title > Demo </title > < script src = "https://unpkg.com/react@16/umd/react.development.js" > </script > < script src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js" > </script > < script src = "https://unpkg.com/babel-standalone" > </script > </head > < body > < div id = "app" > </div > < script type = "text/babel" > class ItemList extends React . Component { render ( ) { const numbers = [ 1 , 2 , 3 , 4 , 5 ] const items = numbers.map( ( number )=> ( < li > {number} </li > )) return ( < ul > {items} </ul > ) } } ReactDOM.render( < ItemList/> , document .getElementById( 'app' ) ); </script > </body > </html > Copy code

2. Key attribute

In the above example, although the elements can be displayed normally, when we open the console, we will see a warning message

Warning: Each child in a list should have a unique "key" prop. Copy the code

We can assign one to each list element

key
Properties to solve the above problem

class ItemList extends React . Component { render () { const numbers = [ 1 , 2 , 3 , 4 , 5 ] const items = numbers.map( ( number )=> ( < li key = { number.toString () }> {number} </li > )) return ( < ul > {items} </ul > ) } } Copy code

The key of an element is preferably a unique string that the element has in the list, and the element index can also be used as a last resort

class ItemList extends React . Component { render () { const numbers = [ 1 , 2 , 3 , 4 , 5 ] const items = numbers.map( ( number, index )=> ( < li key = { index }> {number} </li > )) return ( < ul > {items} </ul > ) } } Copy code

If the order of the list items will change, it is not recommended to use the index as the key

Because this may cause performance problems, and even cause problems with component state

By default, that is, when we do not explicitly specify the key, React will use the index as the key of the list item

3. Rendering components

Except that you can use

map()
Method to render multiple elements, you can also use
map()
Render multiple components, please see an example

class TodoItem extends React . Component { constructor ( props ) { super (props) } render () { return ( < h3 > {this.props.title} </h3 > ) } } class TodoList extends React . Component { constructor ( props ) { super (props) this .state = { itemList : [ { id : 0 , title : 'Say Hello' , isDone : true }, { id : 1 , title : 'Say Goodbye' , isDone : false } ] } } render () { const todoItemList = this .state.itemList.map( ( item ) => { if (!item.isDone) { return ( < li key = { item.id }> < TodoItem title = { item.title }/> </li > ) } }) return ( < ul > {todoItemList} </ul > ) } } ReactDOM.render( < TodoList/> , document .getElementById( 'app' ) ) Copy code