使用 Material-UI 过渡连续显示 Json 值

Question

我有一个来自 API 的 json 数组。

"fruits": [
    {
      "id": "1",
      "fruit": "APPLE",
    },
    {
      "id": "2",
      "fruit": "BANANA",
    },
    {
      "id": "3",
      "fruit": "CHERRY",
    },
    {
      "id": "4",
      "fruit": "GRAPE",
    }
  ]

我想用Material-UI Fade 转换连续显示fruits。

首先fruit应该出现，然后它应该消失，然后，下一个fruit应该出现然后消失。 当所有fruits 都显示完毕后，应该从头开始。

我怎样才能做到这一点？

类似这样的：

{fruit && fruit.map((item) =>(
  <Fade in={x} >
    <div className={styles.fruitContainer}>
      <p className={styles.fruitName}>{item.fruit}</p>
    </div>
  </Fade>
))}

P.S.：水果数量（物体数量）可能会有所不同。

Answer 1

import React from "react";
import Fade from "@material-ui/core/Fade";

export default function SimpleFade() {
  const [id, setId] = React.useState(1);

  const data = {
    fruits: [
      {
        id: "1",
        fruit: "APPLE"
      },
      {
        id: "2",
        fruit: "BANANA"
      },
      {
        id: "3",
        fruit: "CHERRY"
      },
      {
        id: "4",
        fruit: "GRAPE"
      }
    ]
  };

  React.useEffect(() => {
    const interval = setInterval(() => {
      setId((prevId) => (prevId < data.fruits.length ? prevId + 1 : 1));
    }, 1000);
    return () => clearInterval(interval);
  }, [data.fruits.length]);

  return (
    <div>
      {data.fruits.map((fruit) => (
        <Fade in={parseInt(fruit.id, 10) === id} key={`fader_${fruit.id}`}>
          <p>{fruit.fruit}</p>
        </Fade>
      ))}
    </div>
  );
}

https://codesandbox.io/s/material-demo-forked-m2xvg?file=/demo.js

这样的？如果他们需要在同一个地方，则需要样式。