简介
@stagecraft/react-clippy 是一款基于 React 的插件，该插件可以在网页上显示出 Microsoft Agent 助手，这款插件不仅可以为你的网站增加一些趣味性，同时还可以让你更加深入地了解 React 组件的使用方法。
安装
你可以通过 npm 来安装 @stagecraft/react-clippy：
npm install @stagecraft/react-clippy
使用
在你的 React 组件中引入 @stagecraft/react-clippy：
-- -------------------- ---- -------
------ ------ ---- --------------------------
-------- ----- -
------ -
---- ----------------
---
------- ------------------ --
---
------
--
-
------ ------- ----你需要传入 actorName 属性来决定使用哪个 Microsoft Agent 助手，目前可选的助手名称包括 Clippy、Merlin、Rover、Link、以及 Genie 等。
自定义
除了默认提供的属性外，你还可以自定义 Clippy 助手的外观、声音、以及对话框内容等等。
外观
你可以通过设置 className 属性来改变 Clippy 助手的外观：
<Clippy actorName="Clippy" className="my-clippy" />
你可以在 CSS 样式表中为 .my-clippy 添加自定义的样式规则，并通过调整宽度、高度、颜色等属性来改变助手的样式。
声音
你可以通过设置 voiceURI 属性来改变 Clippy 助手的语音：
<Clippy actorName="Clippy" voiceURI="./my_voice.wav" />
请注意，wav 文件必须在 public 文件夹下。
对话框
你可以通过传递一个数组作为 dialog 属性来改变助手的对话内容：
-- -------------------- ---- -------
----- ------ - -
-
------- --------
-------- -
-
------ ------
------- ----
--
-
------ ----------
------- -- -- - -------------------- -
-
-
-
-
------- ------------------ --------------- --每一个对话框都需要传递一个 prompt 属性来描述助手的提问内容，以及一个 options 数组来描述用户可以选择的不同选项。
其中，每个选项都包含一个 label 属性来描述选项的文本内容，以及一个 action 属性来描述选项被选择后所要执行的动作。
示例代码
接下来是一个完整的示例代码，它展示了如何自定义 Clippy 助手外观、声音以及对话框：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------------------
------ ------------
-------- ----- -
----- ------ - -
-
------- --------
-------- -
-
------ ------
------- ----
--
-
------ ----------
------- -- -- - -------------------- -
-
-
-
-
------ -
---- ----------------
---- --------------------------------
------- ------------------ ------------------------- --------------------- --------------- --
------
------
--
-
------ ------- ----通过以上代码，你可以得到一个自定义外观、声音和对话框的 Clippy 助手实例。这项工作并不难，但可以为你的网站增加许多乐趣和奇妙的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ce481e8991b448e6977