React:rc-bullets 弹幕

declare module 'rc-bullets';

在src目录下新建一个types目录
在types 目录下新建一个 index.d.ts文件
添加代码 declare module 'rc-bullets';

import { Button } from 'antd'
import Head from 'next/head'
import type { NextPage } from 'next'
import Layout from '../components/Layout'
import * as echarts from 'echarts';
import { useEffect, useState } from 'react';
import styled from 'styled-components';
import BulletScreen, { StyledBullet } from 'rc-bullets';

/**
 * 文档
 * https://github.com/zerosoul/rc-bullets
 */

const bullet:NextPage = (props:any)=> {
  const [screen, setScreen] = useState();
  const [bullet, setBullet] = useState('');
  const [bulletList,setBulletList] = useState([])
  useEffect(() => {
    let s = new BulletScreen('.screen',{
      duration:10,
      animateTimeFun:'ease-in-out',
      loopCount:'infinite'
    });
    setScreen(s);

    // 从接口请求到数据
    setTimeout(() => {
      setBulletList([
        '张三',
        '李四',
        '王五',
        '赵六'
      ])
    }, 1000);
  }, []);
  useEffect(()=>{
    if (bulletList.length != 0){
      for (let i=0; i{bulletList[i]}

) }, i*1000, i ); } } },[bulletList]) const handleChange = ({ target }:any) => { setBullet(target.value??''); }; // 发送弹幕 const handleSend = () => { if (bullet) { screen.push(

{bullet}

) } }; return (

发送 ); } const MainView = styled.div` flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; ` export default bullet