Telegram 小程序 | TypeScript @telegram-apps/sdk-react @1.x

riyad

客户端 SDK 的 React JS 绑定。 包括钩子、组件和 实用程序，以便在 Telegram 迷你应用程序平台上轻松使用 React JS。安装​

在此之前，假定您已经安装了 react 软件包，因为 是该软件包的同级依赖关系。

pnpm ：

1. pnpm i @telegram-apps/sdk-react

复制代码

npm :

1. npm i @telegram-apps/sdk-react

复制代码

yarn :

1. yarn add @telegram-apps/sdk-react

复制代码

SDKProvider​

SDKProvider 是负责提供 SDK 功能的组件。 它接受 ，如 acceptCustomStyles: boolean 和 debug: boolean 等属性。 两者都是可选的。

acceptCustomStyles 属性负责接受来自 Telegram 网页版的自定义样式。

debug 属性负责启用调试模式。

1. import { SDKProvider } from '@telegram-apps/sdk-react';
   6 E: [+ k6 I! }$ z! I  y) J2 v6 L
2. 
   4 S; ~3 H" ^  r# V. ^7 _
3. /**
   - C: F6 e( L8 P0 y! w5 k
4. * Root component for the whole project.
   2 A5 f; M3 Q) s1 x& j" M$ t" y6 s
5. */
   
6. export function Root() {
   4 B# D+ ^( \2 T& \! o( h
7.   return (
   
8.     <SDKProvider acceptCustomStyles debug>
   
9.       <div>My application!</div>
   0 I  W- U8 S3 t: M* X& p
10.     </SDKProvider>
    
11.   );
    " L+ U; e( i% z2 D% l# |( }
12. }

复制代码

Hooks​

为了更好地理解，每个组件钩子都使用各自与组件相关的 init 函数。 如果 init 函数返回的是非承诺值，钩子将立即检索该值。 如果 init 函数 是异步的，那么当组件仍在 初始化时，钩子将返回一个 undefined 值。 然后，它将更新为初始化值。

本软件包中的所有组件钩子分为两部分：

• 读取实际的初始函数值。 这些钩子是非后缀的，如 useBackButton。
• 检索与初始函数值相关的元项目。 这些钩子包括一个后缀，如 ，如 Raw，如 useBackButtonRaw。
  0 a7 B) M7 y! K/ _  X  `4 K$ u: R) [

第一类钩子返回实际的初始函数值。 如果 在组件初始化过程中出现问题，它们就会出错。

第二类钩子会返回一个包含初始化进程信息的对象。 下面是物体的形状：

1. export interface SDKContextItem<T> {
   + Q  ?& O/ h# _: d4 {' F
2.   /**
   
3.    * This item execution result. The property may be missing
     f) ]1 k5 O/ l/ ?+ ^7 f; _% n
4.    * in case the execution is async.
   
5.    */
   
6.   result?: T;
   / O7 B0 `4 m7 o7 j
7.   /**
   4 R# A$ N' I# a  [+ `* E8 ^
8.    * Function to clean up item side effects.
   8 E- h7 x3 z  _. i$ X
9.    */
   ' O$ F7 h3 d% R' I& g0 w' A: ~
10.   cleanup?(): void;
    - w+ p3 W6 X- r
11.   /**
    
12.    * An error occurred during execution.
    
13.    */
    6 M% T& O: Q) `8 b8 B
14.   error?: unknown;
    
15. }

复制代码

使用第二类钩子，可以提取错误而不抛出错误。

下面是完整的使用示例：

1. import {
   " a  u, e4 t9 a* K
2.   useBackButton,
   + O' N2 K, D( I9 _
3.   useBackButtonRaw,
   & z4 |; u1 ?, k' \; v2 l1 S# d3 @
4.   useViewport,
   ; E' O* P+ E& i4 \2 w
5.   useViewportRaw,
   1 O! M0 N0 y- I1 K( L4 F
6.   useBiometryManagerRaw,
   5 G5 I) `( ~; D7 b6 j
7. } from '@telegram-apps/sdk-react';
   , l6 f& E( w* z" b  D' w) q* c& j
8. import { useEffect } from 'react';
   . Q$ T+ H) c& Q! |
9. 
   - @1 M# k4 f% d& J7 J
10. // BackButton initializes synchronously. So, bb will be
    
11. // the BackButton instance.
    
12. const bb = useBackButton();
    
13. 
    # H' G: N" c! P2 I0 U+ v6 r
14. // Viewport is being initialized asynchronously, so signal may return undefined.
    # T$ Y8 B' A+ E$ Z' b! R3 k7 I- z; ]1 x4 X
15. // After some time it will receive a valid value.
    
16. const vp = useViewport();
    
17. 
    
18. useEffect(() => {
    " @9 X0 h( B! n( e  l( l" h
19.   console.log(vp); // will be undefined and then Viewport instance.
    ! q' ?/ p6 f9 ]2 |( j* L, S* |
20. }, [vp]);
    
21. 
    1 h$ X) ^: o2 J2 {' l3 n" R0 u
22. const bm = useBiometryManagerRaw();
    $ x) d# f! C8 ]1 a3 j9 l' g
23. 
    
24. useEffect(() => {
    
25.   if (bm.error) {
    
26.     console.error('Something went wrong for BiometryManager', bm.error);
    . U7 V% q* R1 c
27.   }
    % v8 d( B4 D0 U& J, E; j7 p2 h
28. }, [bm]);

复制代码

SSR​

该软件包还支持在 Next.js 等流行框架中广泛使用的 SSR 模式。 在服务器端使用 软件包钩子时，必须将 true 作为第一个参数传递。 这将通知钩子 服务器端模式已启用。 如果不指定此值，在服务器端 上调用钩子将导致错误。

服务器端模式会为服务器端的每个组件钩子返回 undefined，也会在挂载当前组件之前返回 undefined。这对于服务器端和客户端渲染的树之间的持久性是必需的。

1. import { useBackButton } from '@telegram-apps/sdk-react';
   
2. import { useEffect } from 'react';
   
3. 
   
4. function Component() {
   / r# b& N7 I( j) @$ b5 @
5.   const bb = useBackButton(true); // will be undefined or BackButton.
   ' Z9 B8 u* k% q) j5 O& c
6. 
   
7.   useEffect(() => {
   # H3 }4 e4 u2 ~3 r
8.     if (bb) {
   
9.       // Here we can safely work with the BackButton.
   % m% B$ o2 {- C' f# T
10.     }
    , g7 n/ n" Y7 ]' h
11.   }, [bb]);
    4 y  Q# F6 d/ z, ]9 m
12. }

复制代码

HOCs​

所有软件包的高阶组件都使用前面描述的钩子。 使用方法相当 简单：

1. import { withBackButton } from '@telegram-apps/sdk-react';
   
2. import { useEffect } from 'react';
   
3. 
   5 W+ X- ~- {) M) z3 a8 K5 s
4. const A = withBackButton('bb', false, ({ bb }) => {
   
5.   useEffect(() => {
   
6.     bb.show();
   
7.   }, [bb]);
   3 I1 L8 ?% u" F- _, p7 ^
8.   return null;
   " E' G9 }) u9 v2 k* ?8 {
9. });
   
10. 
    
11. const B = withBackButton('bb', true, ({ bb }) => {
    
12.   useEffect(() => {
    ! M+ [2 O7 C; A. y* X
13.     bb && bb.show();
    
14.   }, [bb]);
    ; @8 T' J* S5 |/ H8 e
15.   return null;
    
16. });

复制代码

作为第一个参数，您必须传递一个值，该值负责接收 钩子结果的组件属性名称。 第二个参数是 SSR 标志模式，将传递给钩子，内部使用 。

Hooks 和 HOC 列表​

Hook and HOC (Raw)	Hook and HOC (Result)	Returned value
useBackButtonRaw, withBackButtonRaw	useBackButton, withBackButton	BackButton
useBiometryManagerRaw, withBiometryManagerRaw	useBiometryManager, withBiometryManager	BiometryManager 或 undefined
useClosingBehaviorRaw, withClosingBehaviorRaw	useClosingBehavior, withClosingBehavior	ClosingBehavior
useCloudStorageRaw, withCloudStorageRaw	useCloudStorage, withCloudStorage	CloudStorage
useHapticFeedbackRaw, withHapticFeedbackRaw	useHapticFeedback, withHapticFeedback	HapticFeedback
useInitDataRaw, withInitDataRaw	useInitData, withInitData	InitData
useInvoiceRaw, withInvoiceRaw	useInvoice, withInvoice	Invoice
	useLaunchParams	Launch params
useMainButtonRaw, withMainButtonRaw	useMainButton, withMainButton	MainButton
useMiniAppRaw, withMiniAppRaw	useMiniApp, withMiniApp	MiniApp
usePopupRaw, withPopupRaw	usePopup, withPopup	Popup
useQRScannerRaw, withQRScannerRaw	useQRScanner, withQRScanner	QRScanner
useSettingsButtonRaw, withSettingsButtonRaw	useSettingsButton, withSettingsButton	SettingsButton
useSwipeBehaviorRaw, withSwipeBehaviorRaw	useSwipeBehavior, withSwipeBehavior	SwipeBehavior
useThemeParamsRaw, withThemeParamsRaw	useThemeParams, withThemeParams	ThemeParams
useUtilsRaw, withUtilsRaw	useUtils, withUtils	Utils
useViewportRaw, withViewportRaw	useViewport, withViewport	Viewport 或 undefined

模板​

我们已经创建了一个用于 React JS 的 模板，它使用了当前软件包，因此您可以使用它。