React 앱을 위한 Ant Design 글로벌 앱 투어 설계 및 구현.

사용자 둘러보기는 웹 애플리케이션의 귀중한 유용성 기능입니다. 이를 통해 신규 사용자를 효과적으로 온보딩할 수 있으며 소프트웨어를 이해하는 데 도움이 되는 단계별 가이드를 제공합니다. 둘러보기는 반복 작업이나 고급 기능에 대한 빠른 참조 역할을 할 수도 있습니다.

목표: 페이지 간 둘러보기 솔루션

우리는 반응 애플리케이션의 여러 페이지에 걸쳐 온보딩 경험을 만들 수 있는 솔루션을 만드는 것을 목표로 합니다. 그 모습은 다음과 같습니다.

Ant 디자인 투어: 로컬 솔루션

Ant Design은 대화형 가이드를 생성하기 위한 Tour 구성 요소를 제공합니다. 그러나 몇 가지 제한 사항이 있습니다.

• 단일 구성요소 내에서 로컬로 작동합니다.
• React 참조에 크게 의존하므로 여러 페이지에 걸쳐 있는 애플리케이션의 유연성이 떨어집니다.

다음은 기본 로컬 구현을 보여주는 공식 문서의 예입니다.

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></divider>
      <space>
        <button ref="{ref1}">Upload</button>
        <button ref="{ref2}" type="primary">Save</button>
        <button ref="{ref3}" icon="{<EllipsisOutlined"></button>} />
      </space>
      <tour open="{open}" onclose="{()"> setOpen(false)} steps={steps} />
    >
  );
};

export default App;
</tour>

이 구현은 단일 페이지에서는 잘 작동하지만 둘러보기가 React 애플리케이션의 여러 페이지에 걸쳐 있는 시나리오에서는 부족합니다.

---

이를 구현하는 방법은 다음과 같습니다.

---

사전 단계, app.jsx, Routes.jsx, RouteNames.js :

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

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

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></home>)),
  GetRoute(ROUTE_NAMES.ABOUT, WithAppLayout(<about></about>)),
  GetRoute(
    "*",
    <result status="404" title="404" subtitle="Sorry, the page you visited does not exist."></result>
  ),
]);

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

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 to="/about">About
        <button onclick="{()"> setTourActive(true)}>Start Tour</button>
      </header>
      <content>{children}</content>
      <footer>© {new Date().getFullYear()} My App</footer>
      <globaltour></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"></button>} />
    >
  );
};

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

위 내용은 React 앱을 위한 Ant Design 글로벌 앱 투어 설계 및 구현.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!