在带有React的模式文本消息中从下到上滚动

import React, { useState, useEffect } from 'react';

const ScrollingText = ({ messages }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % messages.length);
    }, 3000);

    return () => clearInterval(interval);
  }, [messages]);

  return (
    <div>
      {messages.map((message, index) => (
        <div
          key={index}
          style={{
            position: 'absolute',
            bottom: `${(index - currentIndex) * 20}px`, // 控制从下到上滚动的效果
            transition: 'bottom 0.5s ease-in-out',
          }}
        >
          {message}
        </div>
      ))}
    </div>
  );
};

// 使用示例
const App = () => {
  const messages = [
    '消息1',
    '消息2',
    '消息3',
    '消息4',
    '消息5',
  ];

  return (
    <div>
      <h1>滚动消息</h1>
      <ScrollingText messages={messages} />
    </div>
  );
};