我不喜欢使用,Object.entries(object).map((key, i)因为我发现这是 ECMAScript 7 的一项实验性技术,我觉得在生产中可能会出现问题。是否有任何原生 javascript 替代品?
我对 name、price、description 的值没有任何问题,因为我确切地知道它们应该在何处呈现并且我可以使用 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>
    );
  }
}