Question

我想根据先前的值和当前值向表行添加一个类。如果当前值大于先前的值，则需要添加crypt-up并减少crypt-down className。但是，有什么简单的方法可以比较当前状态值和先前状态值。当化简器对存储进行更改时，我该如何比较它们？

const marketcap = this.props.marketcap.map((coin, i) => (
        <tr key={coin.CoinInfo.Id}>
            <th>{i+1}</th>
            <td className="text-left font-weight-bold"><img src={url+coin.CoinInfo.ImageUrl} className="pr-1 crypt-market-cap-logo" width="20"/>{coin.CoinInfo.FullName}</td>
            <td className="crypt-up"><b>{coin.DISPLAY.USD.MKTCAP}</b></td>
            <td>{coin.DISPLAY.USD.PRICE}</td>
            <td>{coin.DISPLAY.USD.TOTALVOLUME24HTO}</td>
            <td>{coin.DISPLAY.USD.CHANGEPCT24HOUR}%</td>
            <td className="pt-3"><img src={charturl + coin.CoinInfo.Name + charturllast} alt=""/></td>
        </tr>
));

Answer 1

ComponentDidUpdate 将为您提供帮助，此方法接受prevProps和prevState作为参数，因此您可以将prev道具与新的道具进行比较，如下所示：

state = {
  className: 'crypt-up',
}

componentDidUpdate(prevProps) {
  const className = prevProps.value > this.props.value ? 'crypt-up' : 'crypt-down';

  this.setState({ className });
}

React-Redux通过比较两个值在元素上添加类

1 个答案: