设计和实现 React 应用程序的 Ant Design 全球应用之旅

用户游览对于 web 应用程序来说是一项非常宝贵的可用性功能。它们可以让您有效地吸引新用户，并提供分步指南来帮助他们了解软件。导览还可以作为重复任务或高级功能的快速参考。

目标：跨页面游览解决方案

我们的目标是创建一个解决方案，让您能够在 react 应用程序中创建跨多个页面的入门体验。这是它的样子：

ant design tour：本地解决方案

ant design 提供了 tour 组件来创建交互式指南。但是，它有一些限制：

• 它在单个组件中本地工作。
• 它严重依赖 react refs，这使得跨多个页面的应用程序不太灵活。

这是官方文档中的一个示例，演示了基本的本地实现：

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 (
    <>
       setopen(true)}>begin tour
      
      
        upload
        save
        } />
      
       setopen(false)} steps={steps} />
    
  );
};

export default app;

虽然此实现对于单页面效果很好，但在 react 应用程序中跨页面游览的场景中却表现不佳。

我们的实现方式如下：

前置步骤，app.jsx，routes.jsx，routesnames.js :

黄城网络办公系统

具有功能全面实用、安全性稳定性高、易操作、管理维护简单的特点，采用独创的智能型技术，web服务器、数据库和应用程序全部自动傻瓜安装配置，用户可在一分钟内自行安装完毕，无需专业人员即可自行维护，B/S结构，适用于Intranet/Internet应用，客户端只需浏览器便可连接办公系统，无论出差旅行，还是居家办公，工作都能得心应手，实现无地域限制的全球办公，具有邮件管理、业务管理、网络硬盘、智能工作流

下载

import { routerprovider } from "react-router-dom";
import approuter from "./routes";

export default function app() {
  return ;
}

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) => {component};

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()),
  getroute(route_names.about, withapplayout()),
  getroute(
    "*",
    
  ),
]);

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 (
    
      {children}
    
  );
};

export default tourcontext;

第 2 步：定义全球巡演步骤

我们使用 queryselector 通过自定义 data-tour-id 属性动态获取元素，而不是 react refs。

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 (
     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 (
    
      

        home
        about
         settouractive(true)}>start tour
      
      {children}
      
      
    
  );
};

export default applayout;

第 5 步：添加步骤游览 id

由于我们的游览跨越多个页面，我们将为我们想要在步骤中突出显示的每个组件分配 data-tour-id

import { button, space } from "antd";
import { ellipsisoutlined } from "@ant-design/icons";
export const home = () => {
  return (
    <>
      upload
      
        save
      
      } />
    
  );
};

export const About = () => {
  return 
About
;
};