{"id":38428,"date":"2022-11-18T10:25:24","date_gmt":"2023-04-20T04:03:39","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8-react-typescript-%e4%bb%85%e9%80%9a%e8%bf%87-video-%e6%a0%87%e7%ad%be%e5%8a%a0%e8%bd%bd%e8%a7%86%e9%a2%91%e3%80%82\/"},"modified":"2024-01-15T09:55:21","modified_gmt":"2024-01-15T01:55:21","slug":"%e4%bd%bf%e7%94%a8-react-typescript-%e4%bb%85%e9%80%9a%e8%bf%87-video-%e6%a0%87%e7%ad%be%e5%8a%a0%e8%bd%bd%e8%a7%86%e9%a2%91%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8-react-typescript-%e4%bb%85%e9%80%9a%e8%bf%87-video-%e6%a0%87%e7%ad%be%e5%8a%a0%e8%bd%bd%e8%a7%86%e9%a2%91%e3%80%82\/","title":{"rendered":"\u4f7f\u7528 React TypeScript \u4ec5\u901a\u8fc7 video \u6807\u7b7e\u52a0\u8f7d\u89c6\u9891"},"content":{"rendered":"

\u6211\u60f3\u505a\u7684\u4e8b\u60c5<\/h1>\n

(yaritai koto)<\/p>\n

\u6211\u6b63\u5728\u4f7f\u7528React TypeScript\u8fdb\u884c\u5f00\u53d1\uff0c\u5e76\u4e14\u60f3\u8981\u51c6\u5907\u5d4c\u5165\u5f0f\u89c6\u9891\uff0c\u5e76\u5b9e\u73b0\u81ea\u52a8\u64ad\u653e\uff01<\/p>\n

\u6211\u7528\u6545\u4e8b\u7684\u65b9\u5f0f\u5199\u4e0b\u4e86\u6211\u505a\u8fc7\u7684\u4e8b\u60c5\u7684\u7ecf\u8fc7\u3002<\/p>\n

\u6982\u8981<\/h1>\n
    \n
  1. \n
      \u89c6\u9891\u52a0\u8f7d<\/ol>\n<\/li>\n<\/ol>\n

       <\/p>\n

        \n
      1. \n
          \u81ea\u52a8\u64ad\u653e<\/ol>\n<\/li>\n<\/ol>\n

           <\/p>\n

            \u91cd\u64ad\u529f\u80fd<\/ol>\n

            \u6709\u89c6\u9891\u5e93\u5417\uff1f<\/h1>\n

             <\/p>\n

            \u5f53\u6211\u5728\u4f7f\u7528React\u8fdb\u884c\u5f00\u53d1\u65f6\uff0c\u6211\u60f3\u8981\u64ad\u653e\u89c6\u9891\uff01\u5f53\u6211\u641c\u7d22\u65f6\uff0c\u4f1a\u51fa\u73b0\u4e00\u4e9b\u76f8\u5173\u7684\u5e93\u3002\u8fd9\u610f\u5473\u7740\u6211\u5fc5\u987b\u4f7f\u7528\u8fd9\u4e9b\u5e93\u5417\uff1f\u4e3a\u4e86\u5f04\u6e05\u695a\u8fd9\u4e2a\u95ee\u9898\uff0c\u6211\u5c1d\u8bd5\u4e86\u4e0d\u4f7f\u7528\u5e93\u6765\u5b9e\u73b0\uff0c\u770b\u770b\u4f1a\u53d1\u751f\u4ec0\u4e48\u3002<\/p>\n

            \u603b\u7684\u6765\u8bf4\uff0c\u7531\u4e8e\u6d4f\u89c8\u5668\u7684\u7528\u6237\u4ee3\u7406\u6837\u5f0f\u8868\uff0c\u5b83\u7684\u5916\u89c2\u76f8\u5bf9\u4e30\u5bcc\uff0c\u6240\u4ee5\u6839\u636e\u7528\u9014\u4e0d\u540c\uff0c\u53ef\u80fd\u4e0d\u9700\u8981\u4f7f\u7528\u5e93\u3002\u6b64\u5916\uff0c\u8fd9\u79cd\u65b9\u6cd5\u4f3c\u4e4e\u4e5f\u9002\u7528\u4e8e\u63d2\u5165\u80cc\u666f\u89c6\u9891\u3002\u5728\u6b64\u57fa\u7840\u4e0a\uff0c\u52a0\u5165lazyload\u7b49\u6280\u672f\u53ef\u80fd\u4f1a\u66f4\u597d\u3002<\/p>\n

            \u63d0\u4f9b\u4ee5\u4e0b\u7684\u4e2d\u6587\u7ffb\u8bd1\uff1a<\/h1>\n

            \u4ee3\u78bc<\/p>\n

            \u7a81\u7136\u51fa\u73b0\u4e86\u5b50\u7ec4\u4ef6\uff0c\u770b\u8d77\u6765\u662f\u8fd9\u6837\u7684\u3002<\/p>\n

            import<\/span> React<\/span>,<\/span> {<\/span> useRef<\/span>,<\/span> useEffect<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\nimport<\/span> video_mp4<\/span> from<\/span> \"<\/span>..\/movie\/sample.mp4<\/span>\"<\/span>\r\nimport<\/span> video_webm<\/span> from<\/span> \"<\/span>..\/movie\/sample.webm<\/span>\"<\/span>\r\n\r\nexport<\/span> function<\/span> Translate<\/span>()<\/span> {<\/span>\r\n    const<\/span> videoRef<\/span> =<\/span> useRef<\/span><<\/span>HTMLVideoElement<\/span>><\/span>(<\/span>null<\/span>);<\/span>\r\n    useEffect<\/span>(()<\/span> =><\/span> {<\/span>\r\n        videoRef<\/span>.<\/span>current<\/span>?.<\/span>play<\/span>();<\/span>\r\n    },<\/span> []);<\/span>\r\n    return <\/span>(<\/span>\r\n        <<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n                    <<\/span>video<\/span> controls<\/span> muted<\/span> ref<\/span>=<\/span>{<\/span>videoRef<\/span>}<\/span> ><\/span>\r\n                        <<\/span>source<\/span> src<\/span>=<\/span>{<\/span>video_mp4<\/span>}<\/span> type<\/span>=<\/span>\"video\/mp4\"<\/span> \/><\/span>\r\n                        <<\/span>source<\/span> src<\/span>=<\/span>{<\/span>video_webm<\/span>}<\/span> type<\/span>=<\/span>\"video\/webm\"<\/span> \/><\/span>\r\n                        <<\/span>p<\/span>><\/span>Your browser doesn't support HTML5 video.<\/<\/span>p<\/span>><\/span>\r\n                    <\/<\/span>video<\/span>><\/span>\r\n        <\/<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n    );<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u5c1d\u8bd5\u5bfc\u5165\u52a8\u753b\u3002<\/h1>\n
            import<\/span> video_mp4<\/span> from<\/span> \"<\/span>..\/movie\/sample.mp4<\/span>\"<\/span>\r\nimport<\/span> video_webm<\/span> from<\/span> \"<\/span>..\/movie\/sample.webm<\/span>\"<\/span>\r\n<\/code><\/pre>\n
            \u5c06\u89c6\u9891\u5305\u542b\u5728\u6e90\u4e2d\u3002<\/p>\n
            TS\uff082307\uff09<\/h1>\n
            \u5728\u8fd9\u4e2a\u65f6\u5019\uff0c\u5f53\u5bfc\u5165mp4\u548cwebm\u683c\u5f0f\u7684\u65f6\u5019\uff0c\u4f1a\u51fa\u73b0ts(2307)\u9519\u8bef\u3002<\/p>\n
            \u65e0\u6cd5\u627e\u5230\u6a21\u5757..\/movie\/sample.mp4\u6216\u76f8\u5e94\u7684\u7c7b\u578b\u58f0\u660e\u3002ts(2307)<\/div>\n
            \u56e0\u6b64\uff0c\u5728react-app-env.d.ts\u4e2d\u6dfb\u52a0declare\u8bed\u53e5\u3002<\/p>\n
            \/\/\/ <reference types=\"react-scripts\" \/><\/span>\r\ndeclare<\/span> module<\/span> '<\/span>*.mp4<\/span>'<\/span> {<\/span>\r\n    const<\/span> src<\/span>:<\/span> string<\/span>;<\/span>\r\n    export<\/span> default<\/span> src<\/span>;<\/span>\r\n}<\/span>\r\ndeclare<\/span> module<\/span> '<\/span>*.webm<\/span>'<\/span> {<\/span>\r\n    const<\/span> src<\/span>:<\/span> string<\/span>;<\/span>\r\n    export<\/span> default<\/span> src<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u5728\u7f51\u9875\u4e2d\u6dfb\u52a0video\u6807\u7b7e.<\/h1>\n
            \u7528\u4ee3\u7801\u5b9a\u4e49\u89c6\u9891\uff0c\u5e76\u663e\u793a\u4e4b\u524d\u7684\u89c6\u9891\u3002<\/p>\n
             <<\/span>video<\/span> controls<\/span> muted<\/span> ref<\/span>=<\/span>{<\/span>videoRef<\/span>}<\/span> ><\/span>\r\n<\/code><\/pre>\n
            \u5f53\u5199\u4e0b controls \u65f6\uff0c\u5b83\u4f1a\u8bbe\u5b9a\u7528\u6237\u4ee3\u7406\u6837\u5f0f\u8868\u4e2d\u7684\u64ad\u653e\u6309\u94ae\u7b49\u3002\u82e5\u8981\u653e\u7f6e\u80cc\u666f\u89c6\u9891\u4e4b\u7c7b\u7684\u5143\u7d20\uff0c\u5219\u53ef\u4ee5\u5c06 controls \u5220\u9664\u5373\u53ef\u3002\u5728 ref \u4e2d\uff0c\u6211\u4eec\u4f7f\u7528 useRef() \u8bbe\u7f6e\u4e86\u4e00\u4e2a\u5f15\u7528\uff0c\u8fd9\u4e2a\u5c06\u5728\u540e\u9762\u8fdb\u884c\u89e3\u91ca\u3002<\/p>\n
            <<\/span>source<\/span> src<\/span>=<\/span>{<\/span>video_mp4<\/span>}<\/span> type<\/span>=<\/span>\"video\/mp4\"<\/span> \/><\/span>\r\n<\/code><\/pre>\n
            \u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u5c06\u5148\u524d\u5305\u542b\u5728\u6e90\u4ee3\u7801\u4e2d\u7684\u89c6\u9891\u6307\u5b9a\u4e3a\u66ff\u4ee3\u89c6\u9891\u5217\u8868\u4e2d\u7684\u89c6\u9891\u3002\u5728\u7528\u6237\u754c\u9762\u4e2d\uff0c\u5c06\u4f7f\u7528\u6e90\u4ee3\u7801\u4e2d\u7684\u5176\u4e2d\u4e00\u4e2a\u89c6\u9891\u3002<\/p>\n
            \u81ea\u4e3b\u6062\u590d<\/h1>\n
            \u7136\u800c\uff0c\u4ec5\u6307\u5b9a\u4e86\u6e90\uff08source\uff09\u5e76\u4e0d\u4f1a\u81ea\u52a8\u64ad\u653e\u89c6\u9891\u3002\u5982\u679c\u7ed9
            useEffect<\/span>(()<\/span> =><\/span> {<\/span>\r\n  videoRef<\/span>.<\/span>current<\/span>?.<\/span>play<\/span>();<\/span>\r\n},<\/span> []);<\/span>\r\n<\/code><\/pre>\n
            \u5728 useEffect() \u4e2d\u89e6\u53d1 HtmlVideoElement \u7684 play() \u65b9\u6cd5\uff0c\u4ee5\u5728\u6e32\u67d3\u5b8c\u6210\u540e\u64ad\u653e\u89c6\u9891\u3002<\/p>\n
            \u6211\u5e0c\u671b\u589e\u52a0\u4e00\u4e2a\u56de\u653e\u6309\u94ae\uff01<\/h1>\n
            \u300c\u7adf\u7136\u6709\u89c6\u9891\uff01\u4ece\u4e00\u5f00\u59cb\u5c31\u7ed9\u6211\u770b\uff01\u300d
            \n\u300c\u8981\u6211\u5728\u64ad\u653e\u63a7\u5236\u91cc\u7528\u9f20\u6807\u62d6\u52a8\u6ed1\u5757\uff1f\u522b\u8bf4\u9ebb\u70e6\u7684\u8bdd\uff01\u300d
            \n\u4e3a\u4e86\u6ee1\u8db3\u8fd9\u4e2a\u8981\u6c42\uff0c\u6211\u4eec\u51b3\u5b9a\u6dfb\u52a0\u4e00\u4e2a\u91cd\u64ad\u6309\u94ae\u3002<\/p>\n
            \u70b9\u51fb\u6309\u94ae\u540e\uff0c\u5c1d\u8bd5\u6dfb\u52a0\u4e00\u4e2a\u529f\u80fd\uff0c\u4f7f\u89c6\u9891\u80fd\u591f\u8fd4\u56de\u5230\u5f00\u5934\u3002<\/p>\n
            import<\/span> React<\/span>,<\/span> {<\/span> useRef<\/span>,<\/span> useEffect<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\nimport<\/span> video_mp4<\/span> from<\/span> \"<\/span>..\/movie\/sample.mp4<\/span>\"<\/span>\r\nimport<\/span> video_webm<\/span> from<\/span> \"<\/span>..\/movie\/sample.webm<\/span>\"<\/span>\r\n+ <\/span>import<\/span> {<\/span> Button<\/span> }<\/span> from<\/span> '<\/span>@material-ui\/core<\/span>'<\/span>;<\/span>\r\n<\/span>\r\nexport<\/span> function<\/span> Translate<\/span>()<\/span> {<\/span>\r\n    const<\/span> videoRef<\/span> =<\/span> useRef<\/span><<\/span>HTMLVideoElement<\/span>><\/span>(<\/span>null<\/span>);<\/span>\r\n    useEffect<\/span>(()<\/span> =><\/span> {<\/span>\r\n        videoRef<\/span>.<\/span>current<\/span>?.<\/span>play<\/span>();<\/span>\r\n    },<\/span> []);<\/span>\r\n+ <\/span>   const<\/span> StartReplay<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n<\/span>+ <\/span>      videoRef<\/span>.<\/span>current<\/span>?.<\/span>currentTime<\/span> =<\/span> 0<\/span>;<\/span>\r\n<\/span>+ <\/span>   }<\/span>\r\n<\/span>    return <\/span>(<\/span>\r\n        <<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n                    <<\/span>video<\/span> controls<\/span> muted<\/span> ref<\/span>=<\/span>{<\/span>videoRef<\/span>}<\/span> ><\/span>\r\n                        <<\/span>source<\/span> src<\/span>=<\/span>{<\/span>video_mp4<\/span>}<\/span> type<\/span>=<\/span>\"video\/mp4\"<\/span> \/><\/span>\r\n                        <<\/span>source<\/span> src<\/span>=<\/span>{<\/span>video_webm<\/span>}<\/span> type<\/span>=<\/span>\"video\/webm\"<\/span> \/><\/span>\r\n                        <<\/span>p<\/span>><\/span>Your browser doesn't support HTML5 video.<\/<\/span>p<\/span>><\/span>\r\n                    <\/<\/span>video<\/span>><\/span>\r\n+                    <<\/span>Button<\/span> onClick<\/span>=<\/span>{<\/span>StartReplay<\/span>}<\/span> children<\/span>=<\/span>\"replay\"<\/span> variant<\/span>=<\/span>\"contained\"<\/span> color<\/span>=<\/span>\"primary\"<\/span> \/><\/span>\r\n<\/span>        <\/<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n    );<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u5f53\u524d\u65f6\u95f4\u5f00\u59cb<\/h1>\n
            \u8ba9\u6211\u4eec\u6765\u770b\u4e00\u4e0b\u4ee3\u7801\u7684\u8bf4\u660e\u3002<\/p>\n
            \u5982\u679c\u5c06 HtmlVideoElement \u7684\u5c5e\u6027currentTime\u8bbe\u7f6e\u4e3a\u96f6\uff0c\u6211\u4eec\u77e5\u9053\u89c6\u9891\u5c06\u4f1a\u56de\u5230\u5f00\u5934\u3002\u56e0\u6b64\uff0c\u6211\u4eec\u51c6\u5907\u4e86\u4e00\u4e2a\u540d\u4e3aStartReplay\u7684\u51fd\u6570\uff0c\u5728\u5176\u4e2d\u653e\u7f6e\u4e86\u64cd\u4f5ccurrentTime\u7684\u4ee3\u7801\u3002<\/p>\n
            const<\/span> StartReplay<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n   videoRef<\/span>.<\/span>current<\/span>?.<\/span>currentTime<\/span> =<\/span> 0<\/span>;<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u8bf7\u539f\u751f\u5730\u7528\u4e2d\u6587\u91cd\u65b0\u8868\u8fbe\u4ee5\u4e0b\u5185\u5bb9\uff0c\u53ea\u9700\u8981\u4e00\u4e2a\u9009\u9879\uff1aTS\uff082779\uff09<\/h1>\n
            \u73b0\u5728\u51fa\u73b0\u4e86\u95ee\u9898\u3002currentTime\u7684\u90e8\u5206\u51fa\u73b0\u4e86\u9519\u8bef\u3002<\/p>\n
            \u65e0\u6cd5\u5728\u66ff\u6362\u5f0f\u7684\u5de6\u8fb9\u6307\u5b9a\u53ef\u7701\u7565\u7684\u5c5e\u6027\u8bbf\u95ee\u3002ts\uff082779\uff09<\/div>\n
            \u89e3\u51b3\u65b9\u6cd5\u662f\u521b\u5efa\u4e00\u4e2a\u786e\u5207\u80fd\u8ba9\u4eba\u786e\u8ba4\u5176\u5b58\u5728\u7684\u60c5\u51b5\u3002<\/p>\n
            const<\/span> StartReplay<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    if <\/span>(<\/span>videoRef<\/span>.<\/span>current<\/span>?.<\/span>currentTime<\/span>)<\/span> {<\/span>\r\n        videoRef<\/span>.<\/span>current<\/span>.<\/span>currentTime<\/span> =<\/span> 0<\/span>;<\/span>\r\n    }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u8fd9\u6837\u9519\u8bef\u5c31\u89e3\u51b3\u4e86\u3002<\/p>\n
            \u53ea\u662f\u56de\u5230\u4e86\u6700\u521d\u7684\u5730\u65b9<\/h1>\n
            \u6211\u8ba4\u4e3a\u8fd9\u6837\u5c31\u53ef\u4ee5\u4e86\uff0c\u4f46\u662f\u5f88\u9057\u61be\u3002\u8fd9\u6837\u7684\u8bdd\uff0c\u5728\u89c6\u9891\u7ed3\u675f\u540e\uff0c\u91cd\u64ad\u6309\u94ae\u5c31\u65e0\u6cd5\u4f7f\u7528\u4e86\u3002\u8868\u660e\u89c6\u9891\u4e2d\u5149\u6807\u7684\u5f53\u524d\u65f6\u95f4currentTime\u548c\u8d1f\u8d23\u64ad\u653e\u548c\u505c\u6b62\u7684play()\u662f\u4e24\u4e2a\u4e0d\u540c\u7684\u95ee\u9898\u3002<\/p>\n
            const<\/span> StartReplay<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    if <\/span>(<\/span>videoRef<\/span>.<\/span>current<\/span>?.<\/span>currentTime<\/span>)<\/span> {<\/span>\r\n        videoRef<\/span>.<\/span>current<\/span>.<\/span>currentTime<\/span> =<\/span> 0<\/span>;<\/span>\r\n    }<\/span>\r\n    videoRef<\/span>.<\/span>current<\/span>?.<\/span>play<\/span>();<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u5728\u5c06currentTime\u8bbe\u7f6e\u4e3a\u96f6\u540e\uff0c\u4f7f\u7528play()\u65b9\u6cd5\u5f00\u59cb\u64ad\u653e\u3002<\/p>\n
            \u603b\u7ed3<\/h1>\n
            \u8ba9\u6211\u4eec\u6700\u540e\u603b\u7ed3\u4e00\u4e0b\u3002<\/p>\n
            import<\/span> React<\/span>,<\/span> {<\/span> useRef<\/span>,<\/span> useEffect<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\nimport<\/span> video_mp4<\/span> from<\/span> \"<\/span>..\/movie\/sample.mp4<\/span>\"<\/span>\r\nimport<\/span> video_webm<\/span> from<\/span> \"<\/span>..\/movie\/sample.webm<\/span>\"<\/span>\r\n+ <\/span>import<\/span> {<\/span> Button<\/span> }<\/span> from<\/span> '<\/span>@material-ui\/core<\/span>'<\/span>;<\/span>\r\n<\/span>\r\nexport<\/span> function<\/span> Translate<\/span>()<\/span> {<\/span>\r\n    const<\/span> videoRef<\/span> =<\/span> useRef<\/span><<\/span>HTMLVideoElement<\/span>><\/span>(<\/span>null<\/span>);<\/span>\r\n    useEffect<\/span>(()<\/span> =><\/span> {<\/span>\r\n        videoRef<\/span>.<\/span>current<\/span>?.<\/span>play<\/span>();<\/span>\r\n    },<\/span> []);<\/span>\r\n+ <\/span>   const<\/span> StartReplay<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n<\/span>+ <\/span>      if <\/span>(<\/span>videoRef<\/span>.<\/span>current<\/span>?.<\/span>currentTime<\/span>)<\/span> {<\/span>\r\n<\/span>+ <\/span>       videoRef<\/span>.<\/span>current<\/span>.<\/span>currentTime<\/span> =<\/span> 0<\/span>;<\/span>\r\n<\/span>+ <\/span>       }<\/span>\r\n<\/span>+ <\/span>       videoRef<\/span>.<\/span>current<\/span>?.<\/span>play<\/span>();<\/span>\r\n<\/span>+ <\/span>   }<\/span>\r\n<\/span>    return <\/span>(<\/span>\r\n        <<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n                    <<\/span>video<\/span> controls<\/span> muted<\/span> ref<\/span>=<\/span>{<\/span>videoRef<\/span>}<\/span> ><\/span>\r\n                        <<\/span>source<\/span> src<\/span>=<\/span>{<\/span>video_mp4<\/span>}<\/span> type<\/span>=<\/span>\"video\/mp4\"<\/span> \/><\/span>\r\n                        <<\/span>source<\/span> src<\/span>=<\/span>{<\/span>video_webm<\/span>}<\/span> type<\/span>=<\/span>\"video\/webm\"<\/span> \/><\/span>\r\n                        <<\/span>p<\/span>><\/span>Your browser doesn't support HTML5 video.<\/<\/span>p<\/span>><\/span>\r\n                    <\/<\/span>video<\/span>><\/span>\r\n+                    <<\/span>Button<\/span> onClick<\/span>=<\/span>{<\/span>StartReplay<\/span>}<\/span> children<\/span>=<\/span>\"replay\"<\/span> variant<\/span>=<\/span>\"contained\"<\/span> color<\/span>=<\/span>\"primary\"<\/span> \/><\/span>\r\n<\/span>        <\/<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n    );<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
            \u73af\u5883<\/h1>\n