Mereka bentuk dan Melaksanakan Lawatan Apl Global Ant Design untuk Apl React.

Lawatan pengguna ialah ciri kebolehgunaan yang tidak ternilai untuk aplikasi web. Mereka membenarkan anda memasukkan pengguna baharu dengan berkesan, menyediakan panduan langkah demi langkah untuk membantu mereka memahami perisian. Lawatan juga boleh berfungsi sebagai rujukan pantas untuk tugasan berulang atau ciri lanjutan.

Matlamat: Penyelesaian Lawatan Merentas Halaman

Kami menyasarkan untuk mencipta penyelesaian yang membolehkan anda mencipta pengalaman onboarding yang merentas berbilang halaman dalam aplikasi reaksi. Begini rupanya :

Lawatan Reka Bentuk Semut: Penyelesaian Tempatan

Reka Bentuk Semut menyediakan komponen Tour untuk mencipta panduan interaktif. Walau bagaimanapun, ia mempunyai beberapa had:

• Ia berfungsi secara setempat dalam satu komponen.
• Ia sangat bergantung pada rujukan React, menjadikannya kurang fleksibel untuk aplikasi yang merangkumi berbilang halaman.

Berikut ialah contoh daripada dokumentasi rasmi yang menunjukkan pelaksanaan asas tempatan:

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;

Walaupun pelaksanaan ini berfungsi dengan baik untuk halaman tunggal, pelaksanaan ini tidak sesuai dalam senario di mana lawatan merentasi halaman dalam aplikasi React anda.

---

Begini cara kami melaksanakan perkara ini:

---

Langkah pra , 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;

Langkah 1: Sediakan Konteks Lawatan Global

Kami menggunakan React Context untuk mengurus keadaan global lawatan, termasuk langkah lawatan aktif.

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;

---

Langkah 2: Tentukan Langkah Lawatan Global

Daripada rujukan React, kami menggunakan querySelector untuk mengambil elemen secara dinamik oleh atribut data-tour-id tersuai.

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

---

Langkah 3: Buat Komponen Pelancongan Global

Komponen ini mengendalikan navigasi dan langkah merentasi halaman secara dinamik.

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

Langkah 4: Sepadukan ke dalam Reka Letak Apl

Lawatan disepadukan dengan lancar ke dalam reka letak, boleh diakses dari mana-mana halaman.

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;

Langkah 5: Tambahkan ID lawatan langkah

Memandangkan rentang lawatan kami merentasi berbilang halaman , kami akan memberikan data-tour-id untuk setiap komponen yang ingin kami serlahkan dalam langkah kami

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

Atas ialah kandungan terperinci Mereka bentuk dan Melaksanakan Lawatan Apl Global Ant Design untuk Apl React.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!