React 应用演练的设计方法建议
Suggestions for design approach to React app walkthrough
我将尝试为 web app created using React. I'm trying to think of the best way to do it, and have been thinking of using things like Material UI's modal 组件创建演练。我想我还应该包括某种箭头组件，将用户指向我希望他们下一步单击的页面上的任何元素（按钮、link 等）。此外，我还想创建一个背景来淡化屏幕，除了我希望吸引用户注意力的任何元素。
感觉这个应该已经做过很多次了，但是搜了一下都没有找到。显然，每当我 Google “反应 walkthrough/guide/intro” 时，我只会得到有关教授基本 React 的建议。
（注意：我不想做这些介绍性滑块之一，因为我想提供更详细的分步说明）
您需要搜索的关键字是'tour'。在 google 上搜索 'react tour'，我为您找到了 2 个库：
- 反应兜风：https://github.com/gilbarbara/react-joyride | Live Demo
- 反应堆：https://github.com/elrumordelaluz/reactour | Live Demo
两者似乎具有相似的特征：
- 解释页面上某个元素的指令模式。
- 模态框位于突出显示的元素旁边。
- window 将向下滚动到突出显示的元素（如果它在视口之外）。
- 该元素突出显示以引起更多关注，而页面的其余部分则在背景中。
- 模态框上有步进器指示您在哪一步。
我将尝试为 web app created using React. I'm trying to think of the best way to do it, and have been thinking of using things like Material UI's modal 组件创建演练。我想我还应该包括某种箭头组件，将用户指向我希望他们下一步单击的页面上的任何元素（按钮、link 等）。此外，我还想创建一个背景来淡化屏幕，除了我希望吸引用户注意力的任何元素。
感觉这个应该已经做过很多次了，但是搜了一下都没有找到。显然，每当我 Google “反应 walkthrough/guide/intro” 时，我只会得到有关教授基本 React 的建议。
（注意：我不想做这些介绍性滑块之一，因为我想提供更详细的分步说明）
您需要搜索的关键字是'tour'。在 google 上搜索 'react tour'，我为您找到了 2 个库：
- 反应兜风：https://github.com/gilbarbara/react-joyride | Live Demo
- 反应堆：https://github.com/elrumordelaluz/reactour | Live Demo
两者似乎具有相似的特征：
- 解释页面上某个元素的指令模式。
- 模态框位于突出显示的元素旁边。
- window 将向下滚动到突出显示的元素（如果它在视口之外）。
- 该元素突出显示以引起更多关注，而页面的其余部分则在背景中。
- 模态框上有步进器指示您在哪一步。