我不喜欢使用Object.entries(object).map((key, i)
,因为我发现这是ECMAScript 7的一项实验性技术,我觉得在生产环境中可能会出现问题。是否有任何原生JavaScript的替代方法?
对于名称、价格、描述的值我没有问题,因为我知道它们应该渲染在哪里,我可以通过Populate.key访问它们,但是对于特征,我需要遍历对象并呈现键和值。
我尝试使用Object.keys(priceChars).map(function(key, i)
,但不了解如何将键与值分开。比如,它会呈现“performance 500”,但我需要把performance单词放在图标类中,而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>
);
}
}