React アプリの Ant Design グローバル アプリ ツアーの設計と実装。

ユーザー ツアーは、Web アプリケーションにとって非常に貴重なユーザビリティ機能です。これらにより、新しいユーザーを効果的にオンボーディングでき、ソフトウェアを理解するのに役立つステップバイステップのガイドが提供されます。ツアーは、定期的なタスクや高度な機能のクイック リファレンスとしても機能します。

目標: クロスページ ツアー ソリューション

私たちは、React アプリケーションの複数のページにまたがるオンボーディング エクスペリエンスを作成できるソリューションを作成することを目指しています。その様子は次のとおりです:

Ant デザイン ツアー: ローカル ソリューション

Ant Design は、インタラクティブなガイドを作成するための ツアー コンポーネントを提供します。ただし、いくつかの制限があります:

• 単一コンポーネント内でローカルに動作します。
• React ref に大きく依存しているため、複数のページにまたがるアプリケーションの柔軟性が低くなります。

これは、基本的なローカル実装を示す公式ドキュメントの例です。

import React, { useRef, useState } from 'react';
import { EllipsisOutlined } from '@ant-design/icons';
import { Button, Divider, Space, Tour } from 'antd';

const App = () => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);

  const [open, setOpen] = useState(false);

  const steps = [
    { title: 'Upload File', description: 'Put your files here.', target: () => ref1.current },
    { title: 'Save', description: 'Save your changes.', target: () => ref2.current },
    { title: 'Other Actions', description: 'Click to see other actions.', target: () => ref3.current },
  ];

  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>Begin Tour</Button>
      <Divider />
      <Space>
        <Button ref={ref1}>Upload</Button>
        <Button ref={ref2} type="primary">Save</Button>
        <Button ref={ref3} icon={<EllipsisOutlined />} />
      </Space>
      <Tour open={open} onClose={() => setOpen(false)} steps={steps} />
    </>
  );
};

export default App;

この実装は単一ページではうまく機能しますが、ツアーが React アプリケーション内のページにまたがるシナリオでは不十分です。

---

これを実装する方法は次のとおりです:

---

事前ステップ、app.jsx、routes.jsx、routesNames.js :

import { RouterProvider } from "react-router-dom";
import AppRouter from "./routes";

export default function App() {
  return <RouterProvider router={AppRouter} />;
}

export const ROUTE_NAMES = {
  HOME: "/",
  ABOUT: "/about",
};

import AppLayout from "./AppLayout";
import { createBrowserRouter } from "react-router-dom";
import { ROUTE_NAMES } from "./routeNames";
import { Home } from "./components/Home";
import { About } from "./components/About";
import { Result } from "antd";
import {TourProvider} from "./TourContext";

const GetItem = (label, key, icon, to, children = [], type) => {
  return !to
    ? {
      key,
      icon,
      children,
      label,
      type,
    }
    : {
      key,
      icon,
      to,
      label,
    };
};

const GetRoute = (path, element, params = null) => {
  return {
    path,
    element,
  };
};

const WithAppLayout = (Component) => <TourProvider><AppLayout>{Component}</AppLayout></TourProvider>;

export const routeItems = [
  GetItem("Home", "home", null, ROUTE_NAMES.HOME),
  GetItem("About", "about", null, ROUTE_NAMES.ABOUT),
];

const AppRouter = createBrowserRouter([
  GetRoute(ROUTE_NAMES.HOME, WithAppLayout(<Home />)),
  GetRoute(ROUTE_NAMES.ABOUT, WithAppLayout(<About />)),
  GetRoute(
    "*",
    <Result
      status="404"
      title="404"
      subTitle="Sorry, the page you visited does not exist."
    />
  ),
]);

export default AppRouter;

ステップ 1: グローバル ツアー コンテキストを設定する

私たちは React Context を使用して、アクティブなツアー ステップを含むツアーのグローバル状態を管理します。

import React, { createContext, useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { APP_TOURS } from "./steps";

const TourContext = createContext();

export const TourProvider = ({ children }) => {
  const [isTourActive, setTourActive] = useState(false);
  const navigate = useNavigate();

  useEffect(() => {
    if (isTourActive) {
      navigate("/home"); // Redirect to the starting point of the tour
    }
  }, [isTourActive, navigate]);

  return (
    <TourContext.Provider value={{ isTourActive, setTourActive, steps: APP_TOURS }}>
      {children}
    </TourContext.Provider>
  );
};

export default TourContext;

---

ステップ 2: グローバル ツアーのステップを定義する

React refs の代わりに、querySelector を使用して、カスタム data-tour-id 属性によって要素を動的にフェッチします。

const getTourStepElement = (id) => document.querySelector(`[data-tour-id="${id}"]`);

export const APP_TOURS = {
  "/home": [
    { title: "Upload File", description: "Put your files here.", target: () => getTourStepElement("upload") },
    { title: "Save", description: "Save your changes.", target: () => getTourStepElement("save") },
    { type: "navigate", to: "/about", title: "About Us", description: "Learn more about us." },
  ],
  "/about": [
    { title: "About Us", description: "Here's what we are all about.", target: () => getTourStepElement("about") },
  ],
};

---

ステップ 3: グローバル ツアー コンポーネントを作成する

このコンポーネントは、ページ間のナビゲーションとステップを動的に処理します。

import React, { useContext } from "react";
import { Tour } from "antd";
import { useNavigate } from "react-router-dom";
import TourContext from "./TourContext";

export const GlobalTour = () => {
  const { isTourActive, steps, setTourActive } = useContext(TourContext);
  const navigate = useNavigate();

  return (
    <Tour
      open={isTourActive}
      onClose={() => setTourActive(false)}
      steps={steps}
      onChange={(current) => {
        const step = steps[current];
        if (step.type === "navigate") {
          navigate(step.to);
        }
      }}
    />
  );
};

ステップ 4: アプリのレイアウトに統合する

ツアーはレイアウトにシームレスに統合されており、どのページからでもアクセスできます。

import React, { useContext } from "react";
import { Layout, Button } from "antd";
import { Link } from "react-router-dom";
import TourContext from "./TourContext";
import { GlobalTour } from "./GlobalTour";

const { Header, Content, Footer } = Layout;

const AppLayout = ({ children }) => {
  const { setTourActive } = useContext(TourContext);

  return (
    <Layout>
      <Header>
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
        <Button onClick={() => setTourActive(true)}>Start Tour</Button>
      </Header>
      <Content>{children}</Content>
      <Footer>© {new Date().getFullYear()} My App</Footer>
      <GlobalTour />
    </Layout>
  );
};

export default AppLayout;

ステップ 5: ステップ ツアー ID を追加する

ツアーは複数のページにまたがっているため、手順で強調表示したい各コンポーネントに data-tour-id を割り当てます

import { Button, Space } from "antd";
import { EllipsisOutlined } from "@ant-design/icons";
export const Home = () => {
  return (
    <>
      <Button data-tour-id="upload" >Upload</Button>
      <Button data-tour-id="save" type="primary">
        Save
      </Button>
      <Button data-tour-id="actions" icon={<EllipsisOutlined />} />
    </>
  );
};

export const About = () => {
  return <div data-tour-id="about">About</div>;
};

以上がReact アプリの Ant Design グローバル アプリ ツアーの設計と実装。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。