在数组中找到最小值并添加类

Question

我有一个react组件，它可以获取可以是值或未定义的道具。我需要从数组中找到最低值（可以定义一个或多个值），然后将类添加到具有最低值的“列”列表项中。假设对象来像这样：[ {  "r1": [    {     price: 200    }  ],  "r2": [   {    price: undefined   }  ],  "r3": [   {    price: 1000   }  ] }]这是我的组成部分class PriceList extends React.Component { constructor(props) {  super(props);  this.state = {   r1Price: props.parsedOffers[`r1`],   r2Price: props.parsedOffers[`r2`],   r3Price: props.parsedOffers[`r3`]  }; } render() {  return (   <ul class="row">    <li class="column r1">{this.state.r1Price.price ? this.state.r1Price.price : <span>-</span>}</li>    <li class="column r2">{this.state.r2Price.price ? this.state.r2Price.price : <span>-</span>}</li>    <li class="column r3">{this.state.r3Price.price ? this.state.r3Price.price : <span>-</span>}</li>   </ul>  ); }};export default PriceList;我希望在呈现的html中应该这样显示：<ul class="row"> <li class="column r1 lowest">200</li> <li class="column r2">-</li> <li class="column r3">1000</li></ul>

Answer 1

您有一个对象，而不是数组。如果要获取值最低的属性名称，可以使用Object.entries（），Array.prototype.map（）和Array.prototype.sort（）这样：

const state = {

 r1Price: '200',

 r2Price: undefined,

 r3Price: '1000',

 r4Price: '100',

 r5Price: '120'

};

const lowest = Object.entries(state)

  .map(([k,v]) => [k, v ? +v : Infinity])

  .sort((a, b) => a[1] - b[1])[0];

console.log(lowest);

然后，对于每个li，您都可以像这样绑定类：

render() {

  const lowest = Object.entries(this.state)

    .map(([k,v]) => [k, v ? +v : Infinity])

    .sort((a, b) => a[1] - b[1])[0][0];

  return (

    <ul class="row">

      <li className={'column r1 ' + lowest === 'r1Price'}>{...}</li>

      <li className={'column r2 ' + lowest === 'r2Price'}>{...}</li>

      <li className={'column r3 ' + lowest === 'r3Price'}>{...}</li>

    </ul>

  );

}