react中的弹幕效果怎么实现

就像这样 下面有完整代码

一、引入的模块和组件

• 引入 React 的核心库以及useEffect和useState这两个用于处理副作用和管理状态的 React Hook。
• 引入rc-bullets库中。这个库可用于创建弹幕效果

二、组件内部状态管理

 // 弹幕屏幕
  const [screen, setScreen] = useState(null);
  // 弹幕内容
  const [bullet, setBullet] = useState('');
  useEffect(() => {
    // 给页面中某个元素初始化弹幕屏幕，一般为一个大区块。此处的配置项全局生效
    let s = new BulletScreen('.screen',{duration:20});
    // or
    // let s=new BulletScreen(document.querySelector('.screen));
    setScreen(s);
  }, []);
  // 弹幕内容输入事件处理
  const handleChange = ({ target: { value } }) => {
    setBullet(value);
  };
  // 发送弹幕
  const handleSend = () => {
    if (bullet) {
      // push 纯文本
      // screen.push(bullet);
      // or 使用 StyledBullet
 
      screen.push(
        <StyledBullet
          // head={headUrl}
          msg={bullet}
          size='large'
        />
      );
      // or 还可以这样使用，效果等同使用 StyledBullet 组件
      // screen.push({msg:bullet,head:headUrl,color:"#eee",size:"large",backgroundColor:"rgba(2,2,2,.3)"})
    }

  };

里面包含的内容

• 弹幕屏幕状态：
  • const [screen, setScreen] = useState(null);：使用useState创建了一个名为screen的状态变量，初始值为null。这个状态变量用于存储弹幕屏幕的实例。
• 弹幕内容状态：
  • const [bullet, setBullet] = useState('');：创建了一个名为bullet的状态变量，用于存储用户输入的弹幕内容。

• 初始化弹幕屏幕：

  • useEffect
  • let s = new BulletScreen('.screen', { duration: 20 });：创建一个BulletScreen实例，传入页面中某个元素的选择器.screen和一个配置对象，这里设置了弹幕的持续时间为 20。
  • setScreen(s);：将创建的弹幕屏幕实例存储到screen状态变量中。

• 自动发送弹幕：

• 弹幕内容输入事件处理：

• 发送弹幕事件处理：

• 如果bullet有内容，将其作为弹幕推送到弹幕屏幕实例中。可以直接推送纯文本，也可以使用StyledBullet组件或更复杂的配置对象来推送带有特定样式的弹幕。

完整代码

import React, { useEffect, useState } from 'react';
import BulletScreen, { StyledBullet } from 'rc-bullets';
 
const headUrl='https://zerosoul.github.io/rc-bullets/assets/img/heads/girl.jpg';
export default function Demo() {
  // 弹幕屏幕
  const [screen, setScreen] = useState(null);
  // 弹幕内容
  const [bullet, setBullet] = useState('');
  useEffect(() => {
    // 给页面中某个元素初始化弹幕屏幕，一般为一个大区块。此处的配置项全局生效
    let s = new BulletScreen('.screen',{duration:20});
    // or
    // let s=new BulletScreen(document.querySelector('.screen));
    setScreen(s);
  }, []);
  // 弹幕内容输入事件处理
  const handleChange = ({ target: { value } }) => {
    setBullet(value);
  };
  // 发送弹幕
  const handleSend = () => {
    if (bullet) {
      // push 纯文本
      // screen.push(bullet);
      // or 使用 StyledBullet
 
      screen.push(
        <StyledBullet
          // head={headUrl}
          msg={bullet}
          size='large'
        />
      );
      // or 还可以这样使用，效果等同使用 StyledBullet 组件
      // screen.push({msg:bullet,head:headUrl,color:"#eee",size:"large",backgroundColor:"rgba(2,2,2,.3)"})
    }

  };
  let arrdan=[
    '哈丢都会',
    '电饭锅','俄国人打不','地打不过','三大败','答复是个','俄国人打不','地打不过','三大败','答复是个'
  ]
    useEffect(()=>{
        let tim=0
      let aa=new BulletScreen('.screen',{duration:20});
    let intim=setInterval(()=>{
      aa.push(
        arrdan[tim]
        // <StyledBullet
        //   // head={headUrl}
        //   msg={arrdan[tim]}
        //   size='large'
        // />
      );
       tim+=1
       if(tim>=arrdan.length){
        clearInterval(intim)
       }
      },1000)
    },[])
  return (
    <div className='boxxx'>
      <div className="screen" style={{ width: '100vw', height: '20vh',position: 'fixed',
    top: 0,
    left: 0 }}></div>
      {/* <input value={bullet} onChange={handleChange} />
      <button className='buttomsss' onClick={handleSend}>发送</button> */}
    </div>
  );
}