Question

我有一个React JS仪表板页面，每秒都会轮询一个json URL。大多数情况下数据是相同的，但只要其中一部分发生变化，我就想强调更改部分。

有没有办法确定数据的哪些部分发生了变化，这使我能够突出显示它们一两秒？

Answer 1

在您的子组件中，实现volatile int x，您可以将新传递的道具与当前道具进行比较。如果发现两个对象之间存在差异，请将状态设置为“justChanged：true”，并相应显示。

Answer 2

如果我理解正确，你可能需要这样的东西：http://codepen.io/zvona/pen/XdWoBW

let originalJSON = {foo:'bar', foz: 'baz'}
let alteredJSON = {foo: 'barbar', fam: 'bam'}

const getOriginal = function(key, original, altered) {
  const obj = {}
  if (altered[key] && altered[key] !== original[key]) {
    // highlight here, if needed
    obj[key] = altered[key]
  } else {
    obj[key] = original[key]
  }

  return obj
}

const getAltered = function(key, original, altered) {
  const obj = {}
  if (original[key] || altered[key] === original[key]) {
    return false
  } else {
    // highlight here, if needed
    obj[key] = altered[key]
  }

  return obj
}

const getFinal = function(original, altered) {
  return Object.keys(original)
  .map((key) => getOriginal(key, original, altered))
  .concat(
    Object.keys(altered)
    .map((key) => getAltered(key, original, altered))
  )
  .filter((item) => { return item })
  .reduce((prev, next) => { return Object.assign(prev, next) })
}

let final = getFinal(originalJSON, alteredJSON)

在这种情况下，final输出：{foo: "barbar", foz: "baz", fam: "bam"}。现在，突出显示应该在getOriginal和getAltered函数中完成。

React JS：如何突出显示部分数据更改？

2 个答案: