javascript - 如何检查 React 中上一个值和下一个值的差异？

Question

正在使用下面的代码将值列表发送到另一个组件 -

React.createElement("ul", null,
  this.state.stock.map(function (value){
    return (React.createElement(Price, { price: value })) 
  })
)

然后值将被发送到下面的组件-

var initialPrice = null;
var iconClass = ' ';
var counter = 0;
var Price = React.createClass({
  render: function() {
    var newPrice = this.props.price.l_fix;
    var finalPrice = newPrice - initialPrice;

    if(finalPrice < 0) {
      iconClass = 'bg-danger glyphicon glyphicon-triangle-bottom text-danger';
    }
    else if(finalPrice > 0) {
      iconClass = 'glyphicon glyphicon-triangle-top text-success bg-success';
    }

    initialPrice = newPrice;

    return (
      React.createElement("li", null, this.props.price.t," ( ",this.props.price.e,"  ) -  "," Current Price : ",this.props.price.l_fix,"   ",  
                         React.createElement("span", { className: iconClass, "aria-hidden": "true" }),"      Date : ",this.props.price.lt)
                )
        }
    });

在上面的组件中有一个问题。如果我发送单个值，则条件正常。但是，如果我使用值列表，则条件无法正常工作。检查上一个和下一个值以显示三 Angular 形箭头顶部和底部。在渲染结果时，在进行计算时，值未得到正确计算。有什么方法可以正确计算值，然后为对象中的每个项目显示正确的结果吗？

Answer 1

你应该使用 componentWillReceiveProps为此的生命周期方法。它接收nextProps作为参数，可以通过this.props访问当前的props。

方法说明如下:

Invoked when a component is receiving new props. This method is not called for the initial render.

Use this as an opportunity to react to a prop transition before render() is called by updating the state using this.setState(). The old props can be accessed via this.props. Calling this.setState() within this function will not trigger an additional render.

我做了一个 fiddle使用与您的案例类似的示例，以便您了解它是如何工作的。我在一个区间内传递带有组件的 props，并查看与之前状态相比的动态:

componentWillReceiveProps: function(nextProps) {
    let dynamics = ['=', '=']
    
    for(let i=0; i < 2; i++) {
        console.log(i)
      if (nextProps.values[i] > this.props.values[i]) {
        dynamics[i] = '+'
      } 
      else if (nextProps.values[i] === this.props.values[i]) {
        dynamics[i] = '='
      } 
      else {
        dynamics[i] = '-'
      }
    }

希望您能毫无问题地适应您的情况。