简介
@rnacken/quizzer-create-react-app 是一个在 React 应用中快速集成简单的问答系统的 npm 包。它提供了常见的问答界面，以及对用户输入的合法性检查和数据存储的支持。
安装
你可以使用 npm 或者 yarn 安装 @rnacken/quizzer-create-react-app 包。
- -- --- -- --- ------- --------------------------------- - -- ---- -- ---- --- ---------------------------------
安装后，在你的 React 项目中导入 Quizzer 组件
------ ------- ---- ------------------------------------
使用
渲染题目
在 Quizzer 组件中需要传入一个题目数组，其中每个元素都是一个包含题目、选项和正确答案的对象。如下：
----- --------- - -
-
--- --
--------- ---- -- --- ----- --------- -- ----------
-------- -
- --- ---- ------- ------- ----------- --
- --- ---- ------- ------- ---------- --
- --- ---- ------- ----- ------ --
--
------- ----
--
-
--- --
--------- ----- -- --- ------- -- --------
-------- -
- --- ---- ------- ---------- --
- --- ---- ------- --------- --
- --- ---- ------- ----------- --
--
------- ----
--
--Quizzer 组件会自动渲染问题，如下所示：
-------- --------------------- --
校验答案
Quizzer 组件还提供了两个回调函数，用于在用户做出选择和提交答案时执行。
在用户选择选项时，回调函数 onUpdate 会返回你们选择的选项：
----- ------------ - -------------- -- - --------------------- --------- ---------------- -- -------- --------------------- ----------------------- --
在用户提交答案时，回调函数 onSubmit 会返回用户的答案对象。答案对象包括二个属性：
- ------ ------- -- -- ------- ------ -- --------- -
你可以在回调函数 onSubmit 中对用户的答案进行处理，如计算得分或者将数据存储到服务器中。
----- ------------ - ---------- -- - ----------------- ---- --------- ------------ -- -------- --------------------- ----------------------- --
示例代码
下面是一个完整的示例代码，包含 Quizzer 的使用。
------ ----- ---- --------
------ ------- ---- ------------------------------------
----- --------- - -
-
--- --
--------- ---- -- --- ----- --------- -- ----------
-------- -
- --- ---- ------- ------- ----------- --
- --- ---- ------- ------- ---------- --
- --- ---- ------- ----- ------ --
--
------- ----
--
-
--- --
--------- ----- -- --- ------- -- --------
-------- -
- --- ---- ------- ---------- --
- --- ---- ------- --------- --
- --- ---- ------- ----------- --
--
------- ----
--
--
----- ----------- - -- -- -
----- ------------ - -------------- -- -
--------------------- --------- ----------------
--
----- ------------ - ---------- -- -
----------------- ---- --------- ------------
--
------ -------- --------------------- ----------------------- ----------------------- ---
--
------ ------- ------------总结
@rnacken/quizzer-create-react-app 是一个易于集成的问答系统 npm 包，通过几个简单的步骤即可在 React 应用中添加一个简单的问答界面。在实际应用中，你可以通过收集用户的答案数据来反馈该产品或内容的受欢迎程度，或者收集用户的反馈来对产品或内容进行优化。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671d630d0927023822bf7