React 框架

¥React Framework

Reveal.js 可以通过几种不同的方式添加到 React 项目中。

¥Reveal.js can be added to a React project a few different ways.

  1. 通过 npm 安装并设置 reveal.js

    ¥Install and setup reveal.js via npm

  2. 使用第三方包

    ¥Use third-party packages

从 npm 安装

¥Installing From npm

你可以在 JavaScript/TypeScript 源文件（例如 main.tsx 或 app.tsx）中添加并初始化 reveal.js。

¥You can add and initialize reveal.js in a JavaScript/TypeScript source file like main.tsx or app.tsx.

你可以全局执行此操作，即在应用/组件函数之外或其中一个函数内部执行此操作。在后一种情况下，你必须注意不要堆叠初始化。每个幻灯片组只能初始化一次。如果你需要重新配置，请使用 configure 函数或在再次初始化之前对 deck 执行 destroy 操作。

¥You can do so globally i.e. outside of app/component functions or inside one of them. In the latter case, you have to be careful not to stack initializations. Only initialize a slide deck once. If you need to reconfigure, use the configure function or destroy the deck before initializing again.

首先，使用 npm 安装 reveal：

¥To begin, install reveal using npm:

npm install reveal.js

如果你使用 TypeScript，则还需要安装以下类型：

¥If you are using TypeScript, you need to install the types as well:

npm i --save-dev @types/reveal.js

导入

¥Imports

你需要导入以下内容：

¥You will need the following imports:

import Reveal from 'reveal.js';
import 'reveal.js/dist/reveal.css';
import 'reveal.js/dist/theme/black.css'; // "black" theme is just an example

初始化

¥Initialization

最后，添加最适合你项目需求的 初始化代码。

¥Finally, add the initialization code most suitable to your project's needs.

如果你决定在应用或组件函数中初始化幻灯片，并且幻灯片容器位于返回的 JSX 中，我们建议你使用 useEffect 钩子来执行此操作。这将确保初始化在容器首次渲染后进行。

¥If you decide to initialize the slide deck inside an app or component function where slide deck containers are in the returned JSX, we recommended you use a useEffect hook to do so. This will ensure that initialization happens after the containers are first rendered.

还建议使用 refs 来维护幻灯片容器 div 及其对应的 reveal 实例的句柄。这些引用可以帮助确保每个幻灯片只初始化一次。

¥It is also recommended to use refs to maintain a handle on the slide deck container div and the corresponding reveal instance. These refs can help make sure each slide deck is only initialized once.

以下是完整的工作示例：

¥Here's a full working example:

// App.tsx
import { useEffect, useRef } from "react";
import Reveal from "reveal.js";
import "reveal.js/dist/reveal.css";
import "reveal.js/dist/theme/black.css";

function App() {
    const deckDivRef = useRef<HTMLDivElement>(null); // reference to deck container div
    const deckRef = useRef<Reveal.Api | null>(null); // reference to deck reveal instance

    useEffect(() => {
        // Prevents double initialization in strict mode
        if (deckRef.current) return;

        deckRef.current = new Reveal(deckDivRef.current!, {
            transition: "slide",
            // other config options
        });

        deckRef.current.initialize().then(() => {
            // good place for event handlers and plugin setups
        });

        return () => {
            try {
                if (deckRef.current) {
                    deckRef.current.destroy();
                    deckRef.current = null;
                }
            } catch (e) {
                console.warn("Reveal.js destroy call failed.");
            }
        };
    }, []);

    return (
        // Your presentation is sized based on the width and height of
        // our parent element. Make sure the parent is not 0-height.
        <div className="reveal" ref={deckDivRef}>
            <div className="slides">
                <section>Slide 1</section>
                <section>Slide 2</section>
            </div>
        </div>
    );
}

export default App;

请注意在 Reveal 构造函数中使用 deckDivRef。如果你想在同一个 React 应用中添加多个页面，这一点非常重要。

¥Note the use of deckDivRef in the Reveal constructor. This is important if you want to add multiple decks to the the same React app.

React 门户

¥React Portals

如果你只想在特定幻灯片中添加几个组件，我们建议将 reveal.js DOM 树保留在 React 之外，并使用 React 门户 将 React 组件放置在特定部分中。

¥If you only want to sprinkle a few components into specific slides, we recommend keeping the reveal.js DOM tree outside of React and using React Portals to place react component into specific sections.

第三方包

¥Third Party Packages

以下第三方软件包可能有助于将 Reveal.js 演示文稿添加到 React 项目或将 React 组件/应用添加到 Reveal.js 演示文稿：

¥The following third-party packages might prove useful for adding Reveal.js presentations to React projects or for adding React components/apps to Reveal.js presentations: