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