如果我有4个react组件(比方说一些自定义按钮),我如何渲染它们,使最后按下的按钮在顶部?

ckx4rj1h  于 2023-01-27  发布在  React
关注(0)|答案(1)|浏览(114)

我一直在尝试这样做,但我就是不知道怎么做。我在考虑把所有这4个按钮组件放在一个数组中,然后改变位置到第0个索引,如果它是最后一次按下,然后移动所有的按钮到他们的索引+1。
有没有更像React的方法来做到这一点?

euoag5mw

euoag5mw1#

如果不知道更多,这听起来像是一个令人困惑的用户体验--通常我希望按钮停留在一个位置,除此之外,有很多方法可以做到这一点;这里有一个。
你可以保留一个状态对象,将四个按钮的名称作为键,将纪元millis作为值,这样比较上次按下按钮的时间就很容易了。

const [lastPressedTimes, setLastPressedTimes] = useState({
  button1: 1, // initial order
  button2: 2,
  button3: 3,
  button4: 4,
});
const sortedButtonNames = Object.values(lastPressedTimes)
  .sort(([, aTime], [, bTime]) => bTime - aTime) // descending order
  .map(([name]) => name);

return (
  <>
    {sortedButtonNames.map((name) => (
      <YourButton
        name={name}
        key={name}
        onPress={() => setLastPressedTimes({
          ...lastPressedTimes,
          [name]: new Date().getTime(),
        })}
      />
    )}
  </>
);

每当按下按钮时,状态将更新,以便最后按下按钮的时间存储在其名称下。

相关问题