Entwerfen und Implementieren der Ant Design Global App Tour für React Apps.

Benutzertouren sind ein unschätzbar wertvolles Usability-Feature für Webanwendungen. Sie ermöglichen Ihnen die effektive Einbindung neuer Benutzer und bieten Schritt-für-Schritt-Anleitungen, die ihnen helfen, die Software zu verstehen. Touren können auch als Kurzreferenz für wiederkehrende Aufgaben oder erweiterte Funktionen dienen.

Das Ziel: Cross-Page-Tour-Lösung

Unser Ziel ist es, eine Lösung zu schaffen, die es Ihnen ermöglicht, ein Onboarding-Erlebnis zu schaffen, das sich über mehrere Seiten in der React-Anwendung erstreckt. So sieht es aus:

Ant Design Tour: Eine lokale Lösung

Ant Design bietet eine Tour-Komponente zum Erstellen interaktiver Reiseführer. Es gibt jedoch einige Einschränkungen:

• Es funktioniert lokal innerhalb einer einzelnen Komponente.
• Es ist stark auf React-Refs angewiesen, was es weniger flexibel für Anwendungen macht, die sich über mehrere Seiten erstrecken.

Hier ist ein Beispiel aus der offiziellen Dokumentation, das eine grundlegende lokale Implementierung demonstriert:

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;

Während diese Implementierung für einzelne Seiten gut funktioniert, ist sie in Szenarien, in denen sich Touren über Seiten in Ihrer React-Anwendung erstrecken, unzureichend.

---

So setzen wir das um:

---

Vorschritte, app.jsx, Routen.jsx, RoutenNames.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;

Schritt 1: Richten Sie einen globalen Tourkontext ein

Wir verwenden React Context, um den globalen Status der Tour zu verwalten, einschließlich der aktiven Tourschritte.

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;

---

Schritt 2: Definieren Sie globale Tourschritte

Anstelle von React-Refs verwenden wir querySelector, um Elemente dynamisch über ein benutzerdefiniertes data-tour-id-Attribut abzurufen.

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") },
  ],
};

---

Schritt 3: Erstellen Sie eine globale Tourkomponente

Diese Komponente verwaltet dynamisch die Navigation und Schritte über Seiten hinweg.

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);
        }
      }}
    />
  );
};

Schritt 4: In das App-Layout integrieren

Die Tour ist nahtlos in das Layout integriert und von jeder Seite aus zugänglich.

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;

Schritt 5: Schritt-Tour-IDs hinzufügen

Da sich unsere Tour über mehrere Seiten erstreckt, weisen wir jeder Komponente, die wir in unseren Schritten hervorheben möchten, eine Datentour-ID zu.

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>;
};

Das obige ist der detaillierte Inhalt vonEntwerfen und Implementieren der Ant Design Global App Tour für React Apps.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!