在过去的一年中，我们建立了许多测验和应用程序流程（注册，入职和产品制造商）。 在构建这些流程时，我们决定构建一个库来处理这种看似可重复的体验。 就这样React Strider诞生了。
React Strider的核心是一个用于在一系列组件之间前进和后退的库。 该库还有一些额外的口哨声，用于在步骤之间进行动画处理（基于过渡的CSS分类），返回活动索引，并允许您门户跳转到系列中的任何步骤。
作为案例研究，我们将为我使用该库的最新项目构建一个更简单的版本。 我想强调此库，演示文稿，入门，结帐等的无限用例。在这些示例中，我们将使用通用React状态，显然，您可以将其包装在mobx，Redux或任何您喜欢的状态中管理是。 我们不会实现计时器（自动选择器），因为这会增加很多额外的复杂性，从而使该示例难以导航。
您可以在codesandbox上找到我们测验的完整版本，但是随时可以进行逐步了解。
设置我们的初始应用
在开始添加高级逻辑之前，我们首先要拉下库并将其添加到我们的简单React应用程序中。
npm install react-strider --save
我们将添加2个简单步骤（开始和结束步骤）。 我们还将添加隐藏/显示类机制。
您会看到我们正在将许多其他道具传递到我们的“ Step组件”中，但是我们目前实际上并没有使用它。 通知您这些道具可用的目的更多。
该库具有5个核心功能： prev, next, goTo, active, activeIndex 。 您可以将这些功能传递给嵌套在Step任何组件。 如果您希望跟踪其他状态，建议您在Strider库之外进行。 我们将在后面显示示例。
设置测验数据
我们将使用所有问题/答案来设置一个JSON文件（以后可以由api端点替换）。 为了不使这个问题过于复杂，我们将只提供3个可能的问题以及2个可选选项。
显然，这些数据可能来自CMS，并且结构完全不同。 我喜欢以这种方式构造模拟数据，因为它很容易通过键值开关进行迭代。 我还添加了一个fact ，它将为我们的简单测验增加另一层。 这应该使您了解扩展标准功能的方法。 我们将选择放入数组中，以便可以迭代2个或更多可选选择。
接下来，让我们设置实际的单测验组件。 这是我们测验中最复杂的部分，它处理将答案推送到App组件，禁用选择，显示问题和可能的答案，以及在做出选择后返回其他事实。
您会注意到我们在渲染中做了很多事情。 根据用户选择切换问题和事实，以及切换“下一步”按钮。 我们还具有SelectableAnswer组件，该组件可对我们在以上data.js定义的选择进行迭代。
handleSelected
这个功能做了很多。 首先，它首先侦听在SelectedableAnswer组件上所做的SelectedableAnswer ，我们接下来将进行讨论。
- 将正确答案推回分数状态
- 跟踪是否做出选择
- 做出选择后，禁止选择的答案被单击。
- 我们还更新了选择状态，该状态会删除问题并在做出“选择”后显示事实
处理下一个
将答案上推至App组件，以更新正确答案的状态，我们在测验末尾使用它来返回结果。 然后，我们将用户推送到测验的下一步。
该组件用于显示问题中的可选选项。 它侦听上面单个组件的状态变化，以便为您的选择显示正确或错误的状态，以及在选择某个选项后禁用选择。
颜色功能可以处理选项类别的更新，选择错误的答案会使按钮变为红色，而正确的答案会使按钮变为绿色。
现在，我们拥有了所有可动的部分，我们拥有一些浅色的样式，您可以在工作示例中查看这些样式。
我们在代码学院测验中添加了其他选项，其中还提供了其他视觉效果，这是一种计时器机制，可以在用户不够快时自动选择错误的答案。 我们还具有由React-Helmet提供支持的其他销售事实和共享功能。
希望大家都喜欢这个例子，并记住react-strider的用例不仅限于测验:)。
