mirror of
https://gitee.com/270580156/weiyu.git
synced 2026-05-17 20:57:51 +00:00
1 line
15 KiB
JavaScript
1 line
15 KiB
JavaScript
"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2698],{2832:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>d,metadata:()=>o,toc:()=>c});const o=JSON.parse('{"id":"channel/react","title":"React \u96c6\u6210\u6307\u5357","description":"\u5728 React \u5e94\u7528\u4e2d\u96c6\u6210\u5fae\u8bed\u5ba2\u670d\u7cfb\u7edf","source":"@site/i18n/zh-CN/docusaurus-plugin-content-docs/current/channel/react.md","sourceDirName":"channel","slug":"/channel/react","permalink":"/docs/zh-CN/docs/channel/react","draft":false,"unlisted":false,"editUrl":"https://github.com/bytedesk/bytedesk/docs/channel/react.md","tags":[],"version":"current","sidebarPosition":2,"frontMatter":{"title":"React \u96c6\u6210\u6307\u5357","sidebar_label":"React","sidebar_position":2,"description":"\u5728 React \u5e94\u7528\u4e2d\u96c6\u6210\u5fae\u8bed\u5ba2\u670d\u7cfb\u7edf"},"sidebar":"tutorialSidebar","previous":{"title":"\u7f51\u7ad9/Web/H5","permalink":"/docs/zh-CN/docs/channel/web"},"next":{"title":"Vue","permalink":"/docs/zh-CN/docs/channel/vue"}}');var s=t(5723),i=t(6246);const d={title:"React \u96c6\u6210\u6307\u5357",sidebar_label:"React",sidebar_position:2,description:"\u5728 React \u5e94\u7528\u4e2d\u96c6\u6210\u5fae\u8bed\u5ba2\u670d\u7cfb\u7edf"},a=void 0,l={},c=[{value:"\u5b89\u88c5\u5305",id:"\u5b89\u88c5\u5305",level:3},{value:"\u5bfc\u5165\u7ec4\u4ef6",id:"\u5bfc\u5165\u7ec4\u4ef6",level:3},{value:"\u914d\u7f6e\u53c2\u6570",id:"\u914d\u7f6e\u53c2\u6570",level:3},{value:"\u4f7f\u7528\u7ec4\u4ef6",id:"\u4f7f\u7528\u7ec4\u4ef6",level:3},{value:"\u53ef\u7528\u65b9\u6cd5",id:"\u53ef\u7528\u65b9\u6cd5",level:3},{value:"\u5b8c\u6574\u793a\u4f8b",id:"\u5b8c\u6574\u793a\u4f8b",level:3}];function r(n){const e={a:"a",code:"code",h3:"h3",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.R)(),...n.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsxs)(e.li,{children:["\u6f14\u793a\u94fe\u63a5\uff1a",(0,s.jsx)(e.a,{href:"https://weiyuai.cn/reactdemo/",children:"React \u57fa\u7840\u96c6\u6210\u6f14\u793a"})]}),"\n",(0,s.jsxs)(e.li,{children:["\u6f14\u793a\u4ee3\u7801\uff1a",(0,s.jsx)(e.a,{href:"https://github.com/Bytedesk/bytedesk-web/blob/master/examples/react-demo/src/pages/LocalDemo.tsx",children:"React \u57fa\u7840\u96c6\u6210\u793a\u4f8b"})]}),"\n",(0,s.jsx)(e.li,{children:(0,s.jsx)(e.a,{href:"https://github.com/Bytedesk/bytedesk-web",children:"github"})}),"\n",(0,s.jsx)(e.li,{children:(0,s.jsx)(e.a,{href:"https://badge.fury.io/js/bytedesk-web",children:(0,s.jsx)(e.img,{src:"https://badge.fury.io/js/bytedesk-web.svg",alt:"npm version"})})}),"\n",(0,s.jsx)(e.li,{children:(0,s.jsx)(e.a,{href:"https://www.npmjs.com/package/bytedesk-web",children:(0,s.jsx)(e.img,{src:"https://img.shields.io/npm/dm/bytedesk-web.svg?style=flat",alt:"NPM Downloads"})})}),"\n",(0,s.jsx)(e.li,{children:(0,s.jsx)(e.a,{href:"https://www.npmjs.com/package/bytedesk-web",children:"npmjs"})}),"\n"]}),"\n",(0,s.jsx)(e.p,{children:(0,s.jsx)(e.img,{alt:"\u5fae\u8bed\u5ba2\u670dReact\u96c6\u6210\u6548\u679c\u56fe",src:t(7231).A+"",width:"3252",height:"1746"})}),"\n",(0,s.jsx)(e.h3,{id:"\u5b89\u88c5\u5305",children:"\u5b89\u88c5\u5305"}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-bash",children:"npm install bytedesk-web\n# \u6216\nyarn add bytedesk-web\n"})}),"\n",(0,s.jsx)(e.h3,{id:"\u5bfc\u5165\u7ec4\u4ef6",children:"\u5bfc\u5165\u7ec4\u4ef6"}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-bash",children:"import { BytedeskReact } from 'bytedesk-web/react';\nimport type { BytedeskConfig } from 'bytedesk-web';\n"})}),"\n",(0,s.jsx)(e.h3,{id:"\u914d\u7f6e\u53c2\u6570",children:"\u914d\u7f6e\u53c2\u6570"}),"\n",(0,s.jsxs)(e.ul,{children:["\n",(0,s.jsx)(e.li,{children:"\u652f\u6301\u5207\u6362\u5de6\u53f3\u4fa7\u680f\uff0c\u9ed8\u8ba4\u53f3\u4fa7"}),"\n",(0,s.jsx)(e.li,{children:"\u652f\u6301\u81ea\u5b9a\u4e49\u989c\u8272\u4e3b\u9898\uff0c\u9ed8\u8ba4\u84dd\u8272"}),"\n",(0,s.jsx)(e.li,{children:"\u652f\u6301\u81ea\u5b9a\u4e49\u662f\u5426\u663e\u793a\u6c14\u6ce1\uff0c\u9ed8\u8ba4\u663e\u793a"}),"\n",(0,s.jsx)(e.li,{children:"\u652f\u6301\u81ea\u5b9a\u4e49\u56fd\u9645\u5316\u8bed\u8a00\uff0c\u9ed8\u8ba4\u4e2d\u6587"}),"\n",(0,s.jsx)(e.li,{children:"\u652f\u6301\u81ea\u5b9a\u4e49\u6df1\u8272\u6a21\u5f0f\uff0c\u9ed8\u8ba4\u6d45\u8272"}),"\n",(0,s.jsx)(e.li,{children:"\u652f\u6301\u662f\u5426\u81ea\u52a8\u5f39\u7a97\u9080\u8bf7\u5bf9\u8bdd\uff0c\u9ed8\u8ba4\u4e0d\u81ea\u52a8\u5f39\u7a97\uff0c\u5e76\u652f\u6301\u81ea\u5b9a\u4e49\u5f39\u7a97\u9080\u8bf7\u5bf9\u8bdd\u7684\u6807\u9898\u548c\u5185\u5bb9\uff0c\u5f39\u7a97\u6b21\u6570\uff0c\u65f6\u95f4\u95f4\u9694\u7b49"}),"\n",(0,s.jsx)(e.li,{children:"\u652f\u6301\u62d6\u62fd\u529f\u80fd\uff0c\u63a7\u5236\u804a\u5929\u7a97\u53e3\u662f\u5426\u53ef\u62d6\u52a8"}),"\n",(0,s.jsx)(e.li,{children:"\u652f\u6301\u81ea\u5b9a\u4e49\u6309\u94ae\u914d\u7f6e\uff0c\u5305\u62ec\u663e\u793a\u3001\u5bbd\u9ad8\u548c\u56fe\u6807\u7b49"}),"\n",(0,s.jsx)(e.li,{children:"\u652f\u6301\u56fd\u9645\u5316\u8bbe\u7f6e\uff0c\u652f\u6301\u4e2d\u6587\u7b80\u4f53\u3001\u4e2d\u6587\u7e41\u4f53\u3001\u82f1\u6587\u3001\u65e5\u6587\u548c\u97e9\u6587\u7b49\u591a\u79cd\u8bed\u8a00"}),"\n"]}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-bash",children:"const config: BytedeskConfig = {\n placement: 'bottom-right', // \u4f4d\u7f6e\uff1a\u53f3\u4e0b\u89d2\n marginBottom: 20, // \u5e95\u90e8\u8fb9\u8ddd\uff1a20\u50cf\u7d20\n marginSide: 20, // \u4fa7\u8fb9\u8ddd\uff1a20\u50cf\u7d20\n autoPopup: false, // \u662f\u5426\u81ea\u52a8\u5f39\u51fa\u804a\u5929\u7a97\u53e3\n draggable: true, // \u662f\u5426\u53ef\u62d6\u62fd\uff0c\u9ed8\u8ba4\u4e0d\u53ef\u62d6\u62fd\n \n // \u9080\u8bf7\u5bf9\u8bdd\u6846\u914d\u7f6e\n inviteConfig: {\n show: false, // \u662f\u5426\u663e\u793a\u9080\u8bf7\u5bf9\u8bdd\u6846\n delay: 1000, // \u9996\u6b21\u5f39\u51fa\u5ef6\u8fdf\u65f6\u95f4, \u5355\u4f4d: \u6beb\u79d2\n loop: true, // \u662f\u5426\u542f\u7528\u5faa\u73af\n loopDelay: 10000, // \u5faa\u73af\u95f4\u9694, \u5355\u4f4d: \u6beb\u79d2\n loopCount: 3, // \u5faa\u73af\u6b21\u6570, \u8bbe\u7f6e\u4e3a0\u8868\u793a\u65e0\u9650\u5faa\u73af\n // \u81ea\u5b9a\u4e49\u63a5\u53d7\u548c\u62d2\u7edd\u6309\u94ae\u6587\u5b57\n // acceptText: '\u63a5\u53d7',\n // rejectText: '\u62d2\u7edd',\n // \u81ea\u5b9a\u4e49\u4e8b\u4ef6\u56de\u8c03\n // onAccept: () => { console.log('accept'); },\n // onReject: () => { console.log('reject'); },\n // onClose: () => { console.log('close'); },\n // onOpen: () => { console.log('open'); }\n },\n \n // \u6c14\u6ce1\u914d\u7f6e\n bubbleConfig: {\n show: true, // \u662f\u5426\u663e\u793a\u6c14\u6ce1\n icon: '\ud83d\udc4b', // \u6c14\u6ce1\u56fe\u6807\n title: '\u9700\u8981\u5e2e\u52a9\u5417\uff1f', // \u6c14\u6ce1\u6807\u9898\n subtitle: '\u70b9\u51fb\u5f00\u59cb\u5bf9\u8bdd' // \u6c14\u6ce1\u526f\u6807\u9898\n },\n \n // \u6309\u94ae\u914d\u7f6e\n buttonConfig: {\n show: true, // \u662f\u5426\u663e\u793a\u6309\u94ae\n width: 60, // \u6309\u94ae\u5bbd\u5ea6\n height: 60, // \u6309\u94ae\u9ad8\u5ea6\n // icon: '\ud83d\udc4b', // \u53ef\u81ea\u5b9a\u4e49\u6309\u94ae\u56fe\u6807\n // text: '\u9700\u8981\u5e2e\u52a9\u5417\uff1f', // \u53ef\u81ea\u5b9a\u4e49\u6309\u94ae\u6587\u672c\n },\n \n // \u804a\u5929\u914d\u7f6e\n chatConfig: {\n org: 'df_org_uid', // \u66ff\u6362\u4e3a\u60a8\u7684\u7ec4\u7ec7ID\n t: \"2\", \n sid: 'df_rt_uid', // \u66ff\u6362\u4e3a\u60a8\u7684SID\n hello: 'hello' // \u53ef\u6dfb\u52a0\u4efb\u610f\u81ea\u5b9a\u4e49\u53c2\u6570\n },\n \n // \u4e3b\u9898\u914d\u7f6e\n theme: {\n mode: 'light', // \u4e3b\u9898\u6a21\u5f0f\uff1alight(\u6d45\u8272)\u3001dark(\u6df1\u8272)\u6216system(\u8ddf\u968f\u7cfb\u7edf)\n },\n \n // \u56fd\u9645\u5316\u8bbe\u7f6e\uff1aen(\u82f1\u6587)\u3001zh-cn(\u7b80\u4f53\u4e2d\u6587)\u3001zh-tw(\u7e41\u4f53\u4e2d\u6587)\u3001ja(\u65e5\u6587)\u3001ko(\u97e9\u6587)\n locale: 'zh-cn',\n};\n"})}),"\n",(0,s.jsx)(e.h3,{id:"\u4f7f\u7528\u7ec4\u4ef6",children:"\u4f7f\u7528\u7ec4\u4ef6"}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-bash",children:"const App = () => {\n const handleInit = () => {\n console.log('BytedeskReact initialized');\n };\n\n return (\n <div>\n {/* \u5f15\u5165\u7ec4\u4ef6 */}\n <BytedeskReact {...config} onInit={handleInit} />\n \n {/* \u6dfb\u52a0\u6309\u94ae\u89e6\u53d1\u5ba2\u670d\u7a97\u53e3 */}\n <button onClick={() => (window as any).bytedesk?.showChat()}>\n \u6253\u5f00\u804a\u5929\n </button>\n </div>\n );\n};\n"})}),"\n",(0,s.jsx)(e.h3,{id:"\u53ef\u7528\u65b9\u6cd5",children:"\u53ef\u7528\u65b9\u6cd5"}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-bash",children:"# \u663e\u793a/\u9690\u85cf\u804a\u5929\u7a97\u53e3\n(window as any).bytedesk?.showChat() \n(window as any).bytedesk?.hideChat()\n\n# \u5e26\u53c2\u6570\u6253\u5f00\u804a\u5929\u7a97\u53e3\uff08\u53ef\u52a8\u6001\u5207\u6362\u5ba2\u670d\uff09\n(window as any).bytedesk?.showChat({\n chatConfig: {\n org: 'df_org_uid',\n t: \"1\",\n sid: 'df_wg_uid'\n }\n})\n\n# \u663e\u793a/\u9690\u85cf\u6309\u94ae\n(window as any).bytedesk?.showButton();\n(window as any).bytedesk?.hideButton();\n\n# \u663e\u793a/\u9690\u85cf\u6c14\u6ce1\u6d88\u606f\n(window as any).bytedesk?.showBubble();\n(window as any).bytedesk?.hideBubble();\n\n# \u663e\u793a/\u9690\u85cf\u9080\u8bf7\u5bf9\u8bdd\u6846\n(window as any).bytedesk?.showInviteDialog();\n(window as any).bytedesk?.hideInviteDialog();\n"})}),"\n",(0,s.jsx)(e.h3,{id:"\u5b8c\u6574\u793a\u4f8b",children:"\u5b8c\u6574\u793a\u4f8b"}),"\n",(0,s.jsx)(e.p,{children:"\u4e0b\u9762\u662f\u4e00\u4e2a\u66f4\u5b8c\u6574\u7684\u793a\u4f8b\uff0c\u5305\u542b\u4e86\u6240\u6709\u53ef\u7528\u529f\u80fd\u7684\u64cd\u4f5c\u6309\u94ae\uff1a"}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-jsx",children:"import React, { useState } from 'react';\nimport { BytedeskReact } from 'bytedesk-web/react';\nimport type { BytedeskConfig } from 'bytedesk-web';\n\nconst App = () => {\n const [config] = useState<BytedeskConfig>({\n placement: 'bottom-right',\n marginBottom: 20,\n marginSide: 20,\n autoPopup: false,\n draggable: true, // \u662f\u5426\u53ef\u62d6\u62fd\uff0c\u9ed8\u8ba4\u4e0d\u53ef\u62d6\u62fd\n \n inviteConfig: {\n show: false,\n delay: 1000, // \u9996\u6b21\u5f39\u51fa\u5ef6\u8fdf\u65f6\u95f4, \u5355\u4f4d: \u6beb\u79d2\n loop: true, // \u662f\u5426\u542f\u7528\u5faa\u73af\n loopDelay: 10000, // \u5faa\u73af\u95f4\u9694, \u5355\u4f4d: \u6beb\u79d2\n loopCount: 3, // \u5faa\u73af\u6b21\u6570, \u8bbe\u7f6e\u4e3a0\u8868\u793a\u65e0\u9650\u5faa\u73af\n },\n \n bubbleConfig: {\n show: true,\n icon: '\ud83d\udc4b',\n title: '\u9700\u8981\u5e2e\u52a9\u5417\uff1f',\n subtitle: '\u70b9\u51fb\u5f00\u59cb\u5bf9\u8bdd'\n },\n \n buttonConfig: {\n show: true,\n width: 60,\n height: 60,\n },\n \n chatConfig: {\n org: 'df_org_uid', // \u66ff\u6362\u4e3a\u60a8\u7684\u7ec4\u7ec7ID\n t: \"2\", \n sid: 'df_rt_uid', // \u66ff\u6362\u4e3a\u60a8\u7684SID\n hello: 'hello' // \u53ef\u6dfb\u52a0\u4efb\u610f\u81ea\u5b9a\u4e49\u53c2\u6570\n },\n \n theme: {\n mode: 'light', // light | dark | system\n },\n \n locale: 'zh-cn', // en | zh-cn | zh-tw | ja | ko\n });\n\n const handleInit = () => {\n console.log('BytedeskReact initialized');\n };\n\n return (\n <div style={{ padding: '20px' }}>\n <h1>\u5fae\u8bed\u57fa\u672c\u8bbe\u7f6e</h1>\n\n <div style={{ marginTop: '20px', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>\n <button \n onClick={() => (window as any).bytedesk?.showChat()}\n style={{\n padding: '10px 20px',\n backgroundColor: '#2e88ff',\n color: 'white',\n border: 'none',\n borderRadius: '4px',\n cursor: 'pointer'\n }}\n >\n \u6253\u5f00\u804a\u5929\n </button>\n \n <button \n onClick={() => (window as any).bytedesk?.showChat({\n chatConfig: {\n org: 'df_org_uid',\n t: \"1\",\n sid: 'df_wg_uid'\n }\n })}\n style={{\n padding: '10px 20px',\n backgroundColor: '#2e88ff',\n color: 'white',\n border: 'none',\n borderRadius: '4px',\n cursor: 'pointer'\n }}\n >\n \u5e26\u53c2\u6570\u6253\u5f00\u804a\u5929\n </button>\n \n <button \n onClick={() => (window as any).bytedesk?.hideChat()}\n style={{\n padding: '10px 20px',\n backgroundColor: '#2e88ff',\n color: 'white',\n border: 'none',\n borderRadius: '4px',\n cursor: 'pointer'\n }}\n >\n \u5173\u95ed\u804a\u5929\n </button>\n \n <button onClick={() => (window as any).bytedesk?.showButton()}>\u663e\u793a\u6309\u94ae</button>\n <button onClick={() => (window as any).bytedesk?.hideButton()}>\u9690\u85cf\u6309\u94ae</button>\n <button onClick={() => (window as any).bytedesk?.showBubble()}>\u663e\u793a\u6c14\u6ce1</button>\n <button onClick={() => (window as any).bytedesk?.hideBubble()}>\u9690\u85cf\u6c14\u6ce1</button>\n <button onClick={() => (window as any).bytedesk?.showInviteDialog()}>\u663e\u793a\u9080\u8bf7</button>\n <button onClick={() => (window as any).bytedesk?.hideInviteDialog()}>\u9690\u85cf\u9080\u8bf7</button>\n </div>\n \n <BytedeskReact \n {...config} \n onInit={handleInit} \n />\n </div>\n );\n};\n\nexport default App;\n"})})]})}function h(n={}){const{wrapper:e}={...(0,i.R)(),...n.components};return e?(0,s.jsx)(e,{...n,children:(0,s.jsx)(r,{...n})}):r(n)}},6246:(n,e,t)=>{t.d(e,{R:()=>d,x:()=>a});var o=t(2155);const s={},i=o.createContext(s);function d(n){const e=o.useContext(i);return o.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function a(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(s):n.components||s:d(n.components),o.createElement(i.Provider,{value:e},n.children)}},7231:(n,e,t)=>{t.d(e,{A:()=>o});const o=t.p+"assets/images/basicsettings-c442cdc5654fdbeeec1b5992aaf15a8e.png"}}]); |