What are the traversal methods of react

This article mainly explains "what are the traversal methods of react". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what traversal methods react has.

React traversal methods are: 1, the use of foreach () method, syntax "list.forEach ((item) = > {...});"; 2, the use of map () method, syntax "list.map ((item, index) = > {...});".

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

React is traversed by forEach or map.

1. Foreach (recommended)

List.forEach ((item) = > {})

Example:

DataSource.forEach ((item) = > {const est = item.estimateAmount = null? 0: parseFloat (item.estimateAmount); const gmv = item.estimateGmv = = null? 0: parseFloat (item.estimateGmv); allCountBudget + = est; allCountGmv + = gmv; / / allCountGmv = parseFloat (allCountGmv) + parseFloat (gmv);})

2 、 map

List.map ((item, index) = > {})

In React, the map method is used to traverse and display a list of similar objects of a component. Map is not specific to React. Instead, it is a standard JavaScript function that can be called on any array. The map () method creates a new array by calling the provided function on each element in the calling array.

Example:

Var numbers = [1,2,3,4,5]; const doubleValue = numbers.map ((number) = > {return (number * 2);}); console.log (doubleValue)

In React, the map () method is used to:

1. Traverse the list elements.

Import React from 'react'; import ReactDOM from' react-dom'; function NameList (props) {const myLists = props.myLists; const listItems = myLists.map ((myList) = > {myList}); return (React Map example {listItems});} const myLists = ['A','B','C','D','D'] ReactDOM.render (, document.getElementById ('app')); export default App

two。 Use the key to traverse the list elements.

Import React from 'react'; import ReactDOM from' react-dom'; function ListItem (props) {return {props.value};} function NumberList (props) {const numbers = props.numbers; const listItems = numbers.map ((number) = >); return (React Map example {listItems});} const numbers = [1,2,3,4,5] ReactDOM.render (, document.getElementById ('app')); export default App; thank you for reading, the above is the content of "what are the traversal methods of react". After the study of this article, I believe you have a deeper understanding of what traversal methods react has, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!