React.js迭代对象而不是Object.entries的正确方法

Question

我不喜欢使用,Object.entries(object).map((key, i)因为我发现这是ECMAScript 7的实验技术,我觉得生产中可能出现问题.有没有本机JavaScript替代品？

我对名称,价格,描述的值没有任何问题,因为我确切知道应该在哪里呈现它们,我可以使用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
})

Answer 2

在反应中完成功能渲染

const renderbase = ({datalist}) => {
        if(datalist){
            return  Object.keys(datalist).map((item,index) => {
                return(
                  <option value={datalist[item].code} key={index}>
                      {datalist[item].symbol}
                  </option>
                )
            })
        }  
    }

Answer 3

在 JSX 函数中，您可以执行以下操作：

export default function ObjectList() {

  item = {
    "a": 1,
    "b": 2
  }

  return(
    {Object.entries(item).map(([key, value]) => (  
      <p>`Key: ${key}, Value: ${value}`</p>
    ))}
  )
}