在react+typescript使用react-barrage

React-barrage是一个React组件库，提供了在页面上展示弹幕的功能。在使用react-barrage之前，你需要先在项目中安装它：

npm install react-barrage --save

然后在你的组件中使用它：

import React, { useCallback, useEffect, useState } from 'react';
import { Barrage, BarrageItem } from 'react-barrage';

interface Message {
  text: string;
  time: number;
}

const BarrageComponent: React.FC = () => {
  const [messages, setMessages] = useState<Message[]>([]);

  useEffect(() => {
    // 模拟异步获取弹幕数据
    const timer = setInterval(() => {
      const now = Date.now();
      setMessages(prevMessages => [
        ...prevMessages,
        { text: `弹幕${now}`, time: now }
      ]);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  const renderItem = useCallback(({ text }) => {
    return <div>{text}</div>;
  }, []);

  return (
    <Barrage>
      {messages.map(message => (
        <BarrageItem
          key={message.time}
          text={message.text}
          render={renderItem}
        />
      ))}
    </Barrage>
  );
};

export default BarrageComponent;

这里的Barrage组件是弹幕的容器，而BarrageItem则是每一条弹幕。你需要将需要展示的弹幕数据传递给BarrageItem，并通过render函数来渲染每一条弹幕的内容。在上面的例子中，我们使用了useState来存储弹幕数据，并使用useEffect模拟异步获取数据的过程。当组件挂载后，我们每隔一秒钟就会向弹幕数据中添加一条新的弹幕数据，并将其展示在页面上。

需要注意的是，由于react-barrage是基于canvas实现的，因此在使用时需要注意一些性能问题。如果弹幕太多或太长，可能会导致页面卡顿或者崩溃。因此，在使用时需要根据实际情况来控制弹幕的数量和长度。