Rumah > hujung hadapan web > tutorial js > Mereka bentuk dan Melaksanakan Lawatan Apl Global Ant Design untuk Apl React.

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

Patricia Arquette
Lepaskan: 2024-12-25 00:25:14
asal
626 orang telah melayarinya

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 :

Designing and Implementing Ant Design Global App Tour for React Apps.

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;
Salin selepas log masuk

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

Salin selepas log masuk
export const ROUTE_NAMES = {
  HOME: "/",
  ABOUT: "/about",
};

Salin selepas log masuk
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;

Salin selepas log masuk

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;
Salin selepas log masuk

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") },
  ],
};
Salin selepas log masuk

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);
        }
      }}
    />
  );
};
Salin selepas log masuk

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;
Salin selepas log masuk

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

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

Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan