CSS动画不能在所有React组件上运行

Question

我正在开发一个仪表盘应用程序，它从各种来源获取公司数据，并在React应用程序中的一些动画"tiles“上显示这些数据。应用程序将在超时后动态重定向到显示来自不同业务领域的数据的不同页面。这一切都像预期的那样工作，但动画在其中一些瓷砖上丢失了。

经过一些调查，我怀疑没有动画的磁贴的数量总是等于前一页上显示的磁贴的数量(即我的第二个页面目前有4个磁贴，所以在将下一个页面上的前4个磁贴重定向到动画之后)，所以这里一定有某种连接。

这是Dashboard类，它构建了整个过程。

import React, { Component } from "react"
import axios from "axios"
import { GridList, GridListTile } from "@material-ui/core"

import "../assets/scss/tile.scss"
import Request from "../config.json"
import DataTile from "./DiagnosticDataTile"
import Loader from "./Loader"
import { IDiagnosticResultData } from "../interfaces/IDiagnosticResultData"
import { RouteComponentProps, withRouter } from "react-router"

interface IPropsPassed {
  category: string
  redirect: string
}

type IProps = IPropsPassed & RouteComponentProps

interface IState {
  result: IDiagnosticResultData[]
  pageWillChange: boolean
  loading: boolean
}

class Dashboard extends Component<IProps, IState> {
  maxTilesPerRow = 4
  changeTimeInMinutes = 5

  constructor(props: IProps) {
    super(props)

    this.state = {
      loading: true,
      result: null,
      pageWillChange: false
    }
  }

  componentDidMount(): void {
    axios
      .get(Request.url)
      .then(response => {
        this.setState({ result: response.data })
        this.setState({ loading: false })
      })
      .catch(error => {
        console.log(error)
      });
  }

  GetCellHeight(data: IDiagnosticResultData[]): number {
    return window.innerHeight / Math.ceil(data.length / this.maxTilesPerRow)
  }

  GetColour(isOk: boolean): string {
    const purples = ["#7e4c84", "#68396c", "#744177", "#78477f"]

    return isOk ? this.Sample(purples) : "#cd1010"
  }

  Sample(colour: string[]): string {
    return colour[Math.floor(Math.random() * colour.length)]
  }

  NoOfColumns(data: IDiagnosticResultData[]): number {
    return Math.min(data.length, this.maxTilesPerRow)
  }

  changePageAfter(minutes: number): void {
    setTimeout(() => {
      this.props.history.replace(this.props.redirect)
    }, minutes * 60000)
  }

  render() {
    if (!this.props) { return null }

    if (this.state.loading) {
      return <Loader />
    } else {
      var data = this.state.result.filter(x =>
        x.categories.includes(this.props.category)
      )
      this.changePageAfter(this.changeTimeInMinutes)
      return (
        <GridList
          cols={this.NoOfColumns(data)}
          cellHeight={this.GetCellHeight(data)}
          className="tileList"
        >
          {data.map((object, i) => (
            <GridListTile
              key={i}
              className="tile"
              style={{
                animationDuration: `${Math.random() * 2 + 1}s`,
                background: `${this.GetColour(object.status === "OK")}`
              }}
            >
              <DataTile data={object} />
            </GridListTile>
          ))}
        </GridList>
      )
    }
  }
}

export default withRouter(Dashboard)

如果这个描述太模糊了，很抱歉。如果需要更多信息，我将尝试指定更多信息。

谢谢!

Answer 1

这是因为<GridListTile />的key属性并不是独一无二的。

我已经构建了一个简单的app here，其中的键是惟一的，并且是same where the keys are not unique (参见第25行)。

动画只在新的html元素上起作用。如果键是唯一的，react会将其作为一个新的html对象进行处理。