React.js Object.entries 대신 객체를 반복하는 올바른 방법

Question

Object.entries(object).map((key, i)을 사용하는 것이 좋지 않습니다. ECMAScript 7의 실험적 기술이므로 프로덕션 환경에서 문제가 발생할 수 있습니다. 기본 자바 스크립트 대안이 있습니까?

이름, 가격, 설명의 값에는 문제가 없습니다. 렌더링해야하는 위치를 정확히 알고 Populate.key를 사용하여 액세스 할 수 있기 때문입니다. 그러나 특성에 대해서는 개체를 읽고 글자와 키를 모두 렌더링해야합니다. 가치.

나는 Object.keys(priceChars).map(function(key, i)를 사용하려하지만 값에서 키를 분리하는 방법을 이해하지 못했다. 마찬가지로, 그것은 "성능 500"을 렌더링하고 있었지만 성능 단어가 아이콘 클래스에 있어야하고 500이 실제 값으로 표시되어야합니다.

내 JSON 구조

const Populate = { 
    'name': "Product", 
    'price': "1000", 
    'description': "Product description", 
    'characteristics': { 
    'performance': '500', 
    'pressure': '180', 
    'engine': '4', 
    'size': '860*730*1300', 
    'weight': '420' 
    } 
} 

그리고 구성 요소

class PriceBlock extends Component { 
    render() { 
    const {priceName, priceDesc, priceVal, priceChars} = this.props; 
    const characteristics = Object.entries(priceChars).map((key, i) => { 
     return (
     <div className="price__icon-row" key={i}> 
      <i className={'ico ico-' + key[0]}></i> <span>{key[1]}</span> 
     </div> 
    ); 
    }); 
    return (
     <div className="col-5 price__block"> 
     <div className="price__name">{priceName}</div> 
     <div className="price__description">{priceDesc}</div> 
     <div className="price__icons"> 
      {characteristics} 
     </div> 
     <div className={ managePriceClass(priceVal) }>{priceVal}</div> 
     </div> 
    ); 
    } 
} 

Answer 1

a = { 
    a: 1, 
    b: 2, 
    c: 3 
} 

Object.keys(a).map(function(keyName, keyIndex) { 
    // use keyName to get current key's name 
    // and a[keyName] to get its value 
})