reactjs - react 条件样式无法正确渲染

Question

好吧，我遇到了一个非常有趣的问题，即使用 className 有条件地渲染样式，它适用于一个表，但不适用于另一个表。

我使用的是 React 版本 15.6.2

我映射数据并根据是否购买返回第一个表行或第二个表行。

if (isBuy) {
      return (
        <tr key={i} className={( newOrder ? 'updatedOrderTr' : '' )} onClick={() => this.props.populateOrderForm(amount, price, isBuy)}>
          <td>{order[1].user_depth}</td>
          <td>{numberWithDelimiter((price * amount).toFixed(prec))}</td>
          <td>{amount}</td>
          <td>{price.toFixed(prec)}</td>
        </tr>
      );
    } else {
      return (
        <tr key={i} className={( newOrder ? 'updatedOrderTr' : '' )} onClick={() => this.props.populateOrderForm(amount, price, isBuy)}>
          <td>{price.toFixed(prec)}</td>
          <td>{amount}</td>
          <td>{numberWithDelimiter((price * amount).toFixed(prec))}</td>
          <td>{order[1].user_depth}</td>
        </tr>
      );
    }

我渲染该组件的两个实例，它们传递如下结构的数组数组

[ [1, {volume: 1, price: 3}], [2, {volume: 4, price: 2}] ]

唯一的区别是一个表是卖单表，另一个表是买单表，其中表单元格反转。

购买订单行渲染良好，并且样式按预期正确显示(当 newOrder 为 true 时)。

卖单表行只能随机工作。这是一个视频。

https://giphy.com/gifs/3o7aCPUNIy9oA46Y8g/fullscreen

请注意我如何向它发送垃圾邮件才能使右侧实际闪烁。实际上，代码是完全相同的，只是 td 颠倒了......

我很困惑，并且花了很多时间来研究它。

我尝试使应用样式的类只是一个纯色背景而不是动画。

这就是我检查的情况。它检查订单数组的当前索引与该数组的先前状态。

const newOrder = JSON.stringify(this.props.data[i]) !== JSON.stringify(this.state.previousTable[i]);

非常感谢您的帮助!

Answer 1

我通过检查 nextProps 与 currentProps 的比较来解决这个问题，如果它们发生变化，我就会设置导致重新渲染的状态。

右表(卖单)未更新的原因是因为套接字中有买入数据和卖出数据。卖单几乎每次都会首先执行(这就是它会定期工作的原因)。

因为我没有检查 Prop 是否更改，所以状态被多次设置，并且我无法看到样式。

componentWillReceiveProps(props) {
  if (this.props.data !== props.data) {
    this.setState({previousTable: this.props.data});
  }
}