Question

好的，所以我有一个非常有趣的问题，有条件地使用className呈现样式，它适用于一个表但不适用于另一个表。

我正在使用反应版本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为真时）。

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

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相比来解决了这个问题，如果它们发生了变化，我会设置导致重新渲染的状态。

右表（卖单）没有更新的原因是因为有买入数据和卖出数据来自套接字。几乎每次都会出现卖单（这就是它定期工作的原因）。

因为我没有检查道具是否发生变化，所以状态被多次设定，我无法看到这种风格。

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

反映条件样式无法正确呈现

1 个答案: