react 순환 데이터 (목록) 의 실현

우선 우리는 백그라운드에서 전송된 데이터를 시뮬레이션했다. 여기에서 코드를 명확하게 하기 위해 데이터는 간단하게 시뮬레이션했다

   import bg3 from './image/bg3.png'
   constructor(props){
      super(props)
      this.state = {
      /// 
         list:[
            { id:1,img:bg3},
            { id:2,img:bg3},
            { id:3,img:bg3},
            { id:4,img:bg3},
            { id:5,img:bg3},
         ], 
     ///     
      }
   }

그리고 맵 방법으로 순환을 하고 있어요.

  {
        this.state.list.map((item,key) => {
            return (
              <div className="winfor" onClick={() => console.log(item.id)}>
                 <img src={item.img} className="winforimg" />
                    
                 
              </div>
            )
          })
  }

보충: React 루프 목록

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import {Person,Twoway} from './Person/Person'
 
class  App extends Component{
  state={
    persons:[{name:' ',age:'18'},{name:' ',age:'18'},{name:' ',age:'18'}],
 
  }
 
  render(){
    const listItems = this.state.persons.map((item,index) =>
       <Person name={item.name} age={item.age} key={index} />
     );
      return(
        <div className="App">
             {listItems}
        </div>
      )      
  } 
} 
export default App;

이 글은react 순환 데이터의 실현에 관한 글입니다. 더 많은 관련react 순환 데이터 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!