在滾動 React.js 上更新 ID 標簽

Question

你可以在這里找到我的項目： https://codesandbox.io/s/franchise-bg-effect-obd55

我正在嘗試將 CSS 背景 ID 標簽 ( bgArr ) 的數組與afterLoad()中每個部分的數組 ( destination.index ) 匹配。 所以第 1 部分的 ID 應該是“紅色”，第 2 部分的 ID 應該是“藍色”，第 3 部分的 ID 應該是“綠色”。 在頁面加載時，第 1 部分具有正確的 ID 標簽“紅色”。 滾動到第 2 部分時，在控制台中，您會注意到bgIndex更新為正確的 ID 標簽“藍色”，但頁面上 div 的 ID 仍為紅色。 我不確定如何使用更新的 ID 標簽重新渲染 div。

Answer 1

我認為不是這樣：

afterLoad(origin, destination, direction) {
  this.setState({
    isLeaving: false,
  });

  bgIndex = bgArr[destination.index];
}

你應該做這個：

afterLoad(origin, destination, direction) {
  bgIndex = bgArr[destination.index];

  this.setState({
    isLeaving: false,
  });
}

如果在setState調用之后更改bgIndex ，則重新渲染可能在bgIndex更新為正確值之前已經完成。

沙盒示例