reactjs – React条件样式无法正确呈现

发布时间：2020-12-15 09:36:36 所属栏目：百科来源：网络整理

导读：好吧,所以我有一个非常有趣的问题,有条件地使用className渲染一个样式,它适用于一个表但不适用于另一个表. 我正在使用反应版本15.6.2 我映射数据并返回第一个表格行或第二个表格,如果它是买或否. if (isBuy) { return ( tr key={i} className={( newOrder ?

好吧,所以我有一个非常有趣的问题,有条件地使用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,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]);

非常感谢任何帮助！

解决方法

我通过检查nextProps与currentProps相比解决了这个问题,如果它们发生了变化,我会设置导致重新渲染的状态.

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!