使用react和scss对未设置样式的内容进行Flash

import React, { useState, useEffect } from 'react';
import './FlashContent.scss';

const FlashContent = ({ content }) => {
  const [isFlashing, setIsFlashing] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => {
      setIsFlashing((prevIsFlashing) => !prevIsFlashing);
    }, 500); // 闪烁间隔时间，单位为毫秒

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

  return (
    <div className={`flash-content ${isFlashing ? 'flash' : ''}`}>
      {content}
    </div>
  );
};

export default FlashContent;

.flash-content {
  transition: background-color 0.3s ease-in-out;

  &.flash {
    background-color: yellow;
  }
}

import React from 'react';
import FlashContent from './FlashContent';

const App = () => {
  const content = '这是未设置样式的内容';

  return (
    <div>
      <h1>闪烁效果示例</h1>
      <FlashContent content={content} />
    </div>
  );
};

export default App;