就像这样 下面有完整代码
一、引入的模块和组件
- 引入 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>
);
}