What are the react traversal methods?

青灯夜游
Release: 2021-11-25 14:02:22
Original
6018 people have browsed it

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

What are the react traversal methods?

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

react uses forEach or map two traversal methods

1. foreach (recommended)

  list.forEach((item)=>{
  
    });
Copy after login

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);
   });
Copy after login

2. map

list.map((item, index)=>{

});
Copy after login

In React, the map method is used to traverse and display a list of similar objects of the component. Map is not unique to React. On the contrary, it is a standard JavaScript that can be called on any array. function. 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);
Copy after login

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

1. Traverse list elements.

import React from 'react';   
import ReactDOM from 'react-dom';   
  
function NameList(props) {  
  const myLists = props.myLists;  
  const listItems = myLists.map((myList) =>  
    <li>{myList}</li>  
  );  
  return (  
    <div>  
          <h2>React Map例子</h2>  
              <ul>{listItems}</ul>  
    </div>  
  );  
}  
const myLists = [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;, &#39;D&#39;, &#39;D&#39;];   
ReactDOM.render(  
  <NameList myLists={myLists} />,  
  document.getElementById(&#39;app&#39;)  
);  
export default App;
Copy after login

2. Traverse the list elements by key.

import React from &#39;react&#39;;   
import ReactDOM from &#39;react-dom&#39;;   
  
function ListItem(props) {  
  return <li>{props.value}</li>;  
}  
  
function NumberList(props) {  
  const numbers = props.numbers;  
  const listItems = numbers.map((number) =>  
    <ListItem key={number.toString()}  
              value={number} />  
  );  
  return (  
    <div>  
      <h2>React Map例子</h2>  
          <ul> {listItems} </ul>  
    </div>  
  );  
}  
  
const numbers = [1, 2, 3, 4, 5];  
ReactDOM.render(  
  <NumberList numbers={numbers} />,  
  document.getElementById(&#39;app&#39;)  
);  
export default App;
Copy after login

Recommended learning: "react video tutorial"

The above is the detailed content of What are the react traversal methods?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template