当前位置：首页 > news >正文

Reacord API完全参考：从基础到高级功能的详细文档

news 2026/7/4 7:18:27

Reacord API完全参考：从基础到高级功能的详细文档

【免费下载链接】reacordCreate interactive Discord messages using React. ⚛项目地址: https://gitcode.com/gh_mirrors/re/reacord

Reacord 是一个允许开发者使用 React 创建交互式 Discord 消息的强大工具。通过 Reacord API，你可以轻松构建动态、响应式的 Discord 机器人界面，将 React 的声明式编程模型与 Discord 的丰富交互能力相结合。

快速入门：安装与基础配置

要开始使用 Reacord，首先需要将其添加到你的项目中。Reacord 依赖于 React 和 Discord.js，因此需要同时安装这些包。

安装步骤

你可以使用 npm、yarn 或 pnpm 安装 Reacord 及其依赖：

# npm npm install reacord react discord.js # yarn yarn add reacord react discord.js # pnpm pnpm add reacord react discord.js

基础配置

安装完成后，需要创建 Discord.js 客户端和 Reacord 实例：

import { Client, Events } from "discord.js" import { ReacordDiscordJs } from "reacord" const client = new Client() const reacord = new ReacordDiscordJs(client) client.once(Events.ClientReady, () => { console.log("Ready!") }) await client.login(process.env.BOT_TOKEN)

核心功能：发送消息与管理实例

Reacord 的核心功能是创建和管理消息实例。通过这些实例，你可以发送消息、更新内容，并处理用户交互。

创建消息实例

使用createChannelMessage方法创建一个消息实例，并通过render方法渲染内容：

client.once(Events.ClientReady, () => { const channel = await client.channels.fetch("abc123deadbeef") reacord.createChannelMessage(channel).render("Hello, world!") })

你可以渲染字符串、数字或任何 React 可渲染的内容，包括 JSX：

import { useEffect, useState } from "react" function Uptime() { const [startTime] = useState(Date.now()) const [currentTime, setCurrentTime] = useState(Date.now()) useEffect(() => { const interval = setInterval(() => { setCurrentTime(Date.now()) }, 3000) return () => clearInterval(interval) }, []) return <>this message has been shown for {currentTime - startTime}ms</> } client.once(Events.ClientReady, () => { const instance = reacord.createChannelMessage(channel) instance.render(<Uptime />) })

实例管理

你可以多次调用render方法更新消息内容：

interface HelloProps { subject: string } const Hello = ({ subject }: HelloProps) => <>Hello, {subject}!</> client.once(Events.ClientReady, () => { const instance = reacord.createChannelMessage(channel) instance.render(<Hello subject="World" />) instance.render(<Hello subject="Moon" />) })

消息实例可以通过以下方法进行清理：

instance.destroy(): 删除消息
instance.deactivate(): 保留消息但禁用组件和交互监听

你还可以在创建 Reacord 实例时配置最大实例数，以自动管理内存：

const reacord = new ReacordDiscordJs(client, { maxInstances: 3, // 最多同时活跃 3 个实例 })

高级功能：交互组件与命令处理

Reacord 提供了丰富的交互组件，如按钮、选择菜单等，并支持处理 Discord 应用命令。

嵌入消息

使用<Embed />组件创建富文本嵌入消息：

import { Embed } from "reacord" interface FancyMessageProps { title: string description: string } function FancyMessage({ title, description }: FancyMessageProps) { return ( <Embed title={title} description={description} color={0x00ff00} timestamp={Date.now()} /> ) }

你还可以使用更细粒度的嵌入组件，如<EmbedTitle />，实现组件化的嵌入消息构建：

import { Embed, EmbedTitle } from "reacord" function FancyDetails({ title, description }) { return ( <> <EmbedTitle>{title}</EmbedTitle> {description} </> ) } function FancyMessage({ children }) { return ( <Embed color={0x00ff00} timestamp={Date.now()}> {children} </Embed> ) }

处理应用命令

使用createInteractionReply方法回复命令交互：

client.on(Events.InteractionCreate, (interaction) => { if (interaction.isCommand() && interaction.commandName === "ping") { reacord.createInteractionReply(interaction).render(<>pong!</>) } })

你可以创建辅助函数简化命令注册和处理：

function handleCommands(client, commands) { client.once(Events.ClientReady, () => { for (const { name, description } of commands) { client.application?.commands.create({ name, description }) } }) client.on(Events.InteractionCreate, (interaction) => { if (interaction.isCommand()) { for (const command of commands) { if (interaction.commandName === command.name) { command.run(interaction) } } } }) }

特殊类型回复

支持创建临时回复（仅对命令发起者可见）和文本转语音回复：

// 临时回复 reacord.createInteractionReply(interaction, { ephemeral: true }).render(<>(pong)</>) // 文本转语音回复 reacord.createInteractionReply(interaction, { tts: true }).render(<>pong!</>)