{"id":48164,"date":"2022-07-16T02:03:08","date_gmt":"2023-05-06T06:54:47","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/"},"modified":"2024-01-15T12:32:24","modified_gmt":"2024-01-15T04:32:24","slug":"%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/","title":{"rendered":"\u6211\u7528React\u5236\u4f5c\u4e86\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u30102\u3011\u3010\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f\u2461\u3011"},"content":{"rendered":"

\u9996\u5148<\/h2>\n

\u5b66\u4e60\u7684\u539f\u56e0\u548c\u7ecf\u8fc7<\/h4>\n

2020\u5e74\u5f00\u59cb\uff0c\u6211\u51b3\u5b9a\u4ece\u96f6\u5f00\u59cb\u8f6c\u804c\u6210\u4e3a\u4e00\u540d\u5de5\u7a0b\u5e08\uff0c\u5e76\u8fdb\u5165\u67d0\u7f16\u7a0b\u5b66\u6821\u5b66\u4e60\u3002\u5165\u5b66\u540e\u6211\u53d1\u73b0\u5f88\u591a\u4eba\u4ece\u96f6\u5f00\u59cb\u5b66\u4e60Ruby\uff0c\u5e76\u4e14Ruby\u7684\u5de5\u4f5c\u673a\u4f1a\u8fdc\u8fdc\u4e0d\u5982\u6211\u60f3\u8c61\u7684\u5c11\u3002\u56e0\u6b64\u6bd5\u4e1a\u540e\uff0c\u6211\u51b3\u5b9a\u8f6c\u5411\u6210\u4e3a\u4e00\u540d\u524d\u7aef\u5de5\u7a0b\u5e08\u3002\u6211\u5c06\u901a\u8fc7\u8bb0\u5f55React\u5b66\u4e60\u7684\u8fc7\u7a0b\u6765\u6df1\u5316\u6211\u7684\u7406\u89e3\u548c\u5907\u5fd8\u3002<\/p>\n

\u5177\u4f53\u7684\u6b65\u9aa4 de<\/h2>\n
    \n
  1. \n
      \u5728PlayGround\u4e2d\u8fdb\u884c\u63a2\u7d22\u5e76\u8bbe\u7f6e\u53c2\u6570\u3002<\/ol>\n<\/li>\n<\/ol>\n

       <\/p>\n

        \n
      1. \n
          \u4f7f\u7528ChakraUI\u914d\u7f6e\u524d\u7aef\u3002<\/ol>\n<\/li>\n<\/ol>\n

           <\/p>\n

            \n
          1. \n
              \u5904\u7406\u8bf7\u6c42\u3002<\/ol>\n<\/li>\n<\/ol>\n

               <\/p>\n

                \n
              1. \n
                  \u4f7f\u7528\u54cd\u5e94\u5728\u524d\u7aef\u663e\u793a\u3002<\/ol>\n<\/li>\n<\/ol>\n

                   <\/p>\n

                    \u4f7f\u7528ChakraUI\u663e\u793a\u52a0\u8f7d\u72b6\u6001\u5e76\u542f\u7528\u6697\u9ed1\u6a21\u5f0f\u3002<\/ol>\n

                    GraphQL\u662f\u4e00\u79cd\u67e5\u8be2\u8bed\u8a00<\/h2>\n

                    \u300cGraphQL\u300d\u662fFacebook\u5f00\u53d1\u548c\u63d0\u4f9b\u7684Web API\u67e5\u8be2\u8bed\u8a00\u3002
                    \n\u5b83\u662f\u7531\u67e5\u8be2\u8bed\u8a00\u548c\u6a21\u5f0f\u8bed\u8a00\u6784\u6210\u7684Web API\u89c4\u8303\uff0c\u6b63\u5982\u540d\u5b57\u6240\u793a\uff0c\u53ef\u4ee5\u5411\u670d\u52a1\u5668\u67e5\u8be2\u6570\u636e\u3002GraphQL\u4e8e2012\u5e74\u7531Facebook\u5f00\u53d1\uff0c\u5e76\u57282015\u5e74\u5f00\u6e90\u3002
                    \nGraphQL\u652f\u6301\u5404\u79cd\u64cd\u4f5c\u7cfb\u7edf\uff0c\u53ef\u8fdb\u884c\u8de8\u5e73\u53f0\u5f00\u53d1\u3002\u6b64\u5916\uff0c\u5b83\u8fd8\u652f\u6301\u591a\u79cd\u7f16\u7a0b\u8bed\u8a00\uff0c\u5982Java\u3001JavaScript\u3001Ruby\u7b49\uff0c\u8fd9\u4e5f\u662f\u5176\u7279\u70b9\u4e4b\u4e00\u3002<\/p>\n

                    GraphQL\u7684\u4f18\u70b9\u548c\u7f3a\u70b9\u662f\u4ec0\u4e48\uff1f<\/h2>\n

                    GraphQL\u7684\u4f18\u70b9\u6709\u4ee5\u4e0b3\u70b9\u3002<\/h4>\n

                    \u2460 \u901a\u8fc7\u8f83\u5c11\u7684\u8bf7\u6c42\u53ef\u4ee5\u8bbf\u95ee\u591a\u4e2a\u8d44\u6e90\u3002
                    \n\u2461 \u4ec5\u83b7\u53d6\u6700\u5c11\u91cf\u7684\u6570\u636e\u3002
                    \n\u2462 \u53ef\u4ee5\u66f4\u65b0API\u800c\u4fdd\u7559\u73b0\u6709\u7684\u67e5\u8be2\u3002<\/p>\n

                    \u2460 \u53ea\u9700\u5c11\u6570\u8bf7\u6c42\u5373\u53ef\u8bbf\u95ee\u591a\u4e2a\u8d44\u6e90<\/h3>\n

                    \u7531\u4e8e\u4e0d\u4f9d\u8d56\u4e8eHTTP\u7ed3\u6784\uff0c\u53ef\u4ee5\u83b7\u53d6\u591a\u4e2a\u9875\u9762\u6240\u9700\u7684\u6570\u636e\u3002\u56e0\u6b64\uff0c\u8bf7\u6c42\u4e0d\u4f1a\u88ab\u6d6a\u8d39\uff0c\u96be\u4ee5\u5bfc\u81f4\u6027\u80fd\u4e0b\u964d\uff0c\u4e5f\u4e0d\u4f1a\u7ed9\u670d\u52a1\u5668\u5e26\u6765\u8d1f\u62c5\uff0c\u4ece\u800c\u53ef\u4ee5\u964d\u4f4e\u786c\u4ef6\u6210\u672c\u3002<\/p>\n

                    \u4ec5\u83b7\u53d6\u6700\u5c11\u91cf\u7684\u6570\u636e\u3002<\/h3>\n

                    GraphQL\u5141\u8bb8\u6307\u5b9a\u83b7\u53d6\u7684\u6570\u636e\u5e76\u53d1\u9001\u8bf7\u6c42\u3002\u4f8b\u5982\uff0c\u53ea\u9700\u6307\u5b9a\u59d3\u540d\u548c\u7535\u5b50\u90ae\u4ef6\u5730\u5740\u5373\u53ef\u5411\u670d\u52a1\u5668\u67e5\u8be2\uff0c\u901a\u8fc7\u8fd9\u79cd\u65b9\u5f0f\uff0c\u53ef\u4ee5\u4ec5\u83b7\u53d6\u6240\u9700\u7684\u6570\u636e\uff0c\u907f\u514d\u901a\u4fe1\u6d6a\u8d39\uff0c\u540c\u65f6\u4e5f\u80fd\u63d0\u9ad8\u6027\u80fd\u3002<\/p>\n

                    \u53ea\u9700\u4e00\u79cd\u9009\u62e9\u5373\u53ef\uff0c\u4ee5\u4e0b\u662f\u4e2d\u6587\u7684\u7ffb\u8bd1\uff1a
                    \n\u2462 \u53ef\u4ee5\u5728\u4e0d\u7834\u574f\u73b0\u6709\u7684\u67e5\u8be2\u7684\u60c5\u51b5\u4e0b\u66f4\u65b0API\u3002<\/h3>\n

                    \u9664\u975e\u81ea\u884c\u5220\u9664\u5b57\u6bb5\uff0c\u5426\u5219\u4e0d\u4f1a\u7834\u574f\u67e5\u8be2\uff0c\u8fd9\u6837\u5c31\u4e0d\u4f1a\u5bf9\u5ba2\u6237\u7aef\u884c\u4e3a\u4ea7\u751f\u5f71\u54cd\uff0c\u80fd\u591f\u4fdd\u6301\u66f4\u65b0\u540e\u7684\u8bf7\u6c42\u7684\u7a33\u5b9a\u6027\u3002<\/p>\n

                    GraphQL\u7684\u7f3a\u70b9\u6709\u4ee5\u4e0b\u4e24\u4e2a\u3002<\/h4>\n

                    \u2460 \u7531\u4e8e\u662f\u65b0\u6280\u672f\uff0c\u6240\u4ee5\u4fe1\u606f\u5f88\u5c11\u3002
                    \n\u2461 \u7f13\u5b58\u53d8\u5f97\u590d\u6742\u3002<\/p>\n

                    \u2460 \u7531\u4e8e\u8fd9\u9879\u6280\u672f\u5f88\u65b0\uff0c\u6240\u4ee5\u76f8\u5173\u4fe1\u606f\u8f83\u5c11\u3002<\/h3>\n

                    \u7531\u4e8eGraphQL\u662f\u4e00\u4e2a\u76f8\u5bf9\u8f83\u65b0\u7684\u89c4\u8303\uff0c\u56e0\u6b64\u4fe1\u606f\u91cf\u8f83\u5c11\u3002\u5982\u679c\u662f\u81ea\u5b66\u7684\u8bdd\uff0c\u9700\u8981\u5728\u6709\u9650\u7684\u4fe1\u606f\u4e2d\u8fdb\u884c\u5b66\u4e60\uff0c\u6240\u4ee5\u8981\u638c\u63e1\u5b83\u9700\u8981\u4e00\u5b9a\u7684\u65f6\u95f4\u3002<\/p>\n

                    \u73b0\u91d1\u53d8\u5f97\u590d\u6742\u3002<\/h3>\n

                    GraphQL\u7684\u7f13\u5b58\u673a\u5236\u4e0d\u4f1a\u751f\u6210URL\uff0c\u540c\u65f6\u54cd\u5e94\u5185\u5bb9\u4e5f\u4f1a\u53d1\u751f\u53d8\u5316\uff0c\u56e0\u6b64\u76f8\u5bf9\u590d\u6742\u3002\u8fd9\u5c31\u4f7f\u5f97\u901a\u8fc7CDN\u8fdb\u884c\u8d1f\u8f7d\u5904\u7406\u53d8\u5f97\u56f0\u96be\uff0c\u5e76\u4e14\u53ef\u80fd\u5bf9\u5ba2\u6237\u7aef\u4ea7\u751f\u8d1f\u9762\u5f71\u54cd\u3002<\/p>\n

                    \u5728PlayGround\u4e2d\u8fdb\u884c\u63a2\u7d22\u5e76\u8bbe\u7f6e\u53c2\u6570\u3002<\/h2>\n

                    \u8bbf\u95ee\u5929\u6c14API\uff0c\u53ef\u4ee5\u770b\u5230\u4ea4\u4e92\u5f0f\u6e38\u4e50\u573a\u6b63\u5728\u8fd0\u884c\u3002\u8fd9\u91cc\u663e\u793a\u7684\u662f\u4e00\u4e2a\u5305\u542b\u8bb8\u591a\u53c2\u6570\u7684\u67e5\u8be2\u3002\u6267\u884c\u6b64\u67e5\u8be2\u65f6\uff0c\u5c06\u663e\u793a\u5305\u542b\u8f93\u5165\u53c2\u6570\u7684\u7ed3\u679c\u6570\u636e\u7684\u54cd\u5e94\u3002\u5728\u8fd9\u91cc\u4f7f\u7528\u7684\u53c2\u6570\u662fname\u3001weather\u3001temperature\u548cwind\u3002<\/p>\n

                    \u4fee\u6b63\u540e\u7684\u67e5\u8be2\u5982\u4e0b\u3002<\/p>\n

                    query {\r\n  getCityByName(name: <Your_City>) {\r\n    name\r\n    weather {\r\n      summary {\r\n        title\r\n        description\r\n      }\r\n      temperature {\r\n        actual\r\n        feelsLike\r\n      }\r\n      wind {\r\n        speed\r\n      }\r\n    }\r\n  }\r\n}\r\n<\/code><\/pre>\n
                    \u8bf7\u5728”Your_City”\u7684\u4f4d\u7f6e\u8f93\u5165\u60a8\u6240\u5c45\u4f4f\u7684\u57ce\u5e02\u6216\u4efb\u4f55\u5176\u4ed6\u57ce\u5e02\u540d\u79f0\u3002
                    \n\u76ee\u524d\u5e76\u4e0d\u4f7f\u7528\u6240\u6709\u6570\u636e\uff0c\u6682\u65f6\u6267\u884c\u67e5\u8be2\u3002<\/p>\n
                    2. \u901a\u8fc7ChakraUI\u914d\u7f6e\u524d\u7aef\u8bbe\u7f6e<\/h2>\n
                    \u4f7f\u7528 Chakra UI \u8fdb\u884c\u524d\u7aef\u8bbe\u7f6e\u3002<\/p>\n
                    \u4f7f\u7528npm\u5de5\u5177\u6765\u5b89\u88c5Chakra UI\u3002<\/p>\n
                    npm i @chakra-ui\/react @emotion\/react@^11 @emotion\/styled@^11 framer-motion@^4\r\n<\/code><\/pre>\n
                    \u5728\u6839\u6587\u4ef6\uff08src\/index.js\uff09\u4e2d\u8bbe\u7f6e\u63d0\u4f9b\u8005\u3002<\/p>\n
                    import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom<\/span>'<\/span>\r\nimport<\/span> {<\/span> ChakraProvider<\/span>,<\/span> ColorModeScript<\/span> }<\/span> from<\/span> '<\/span>@chakra-ui\/react<\/span>'<\/span>\r\nimport<\/span> App<\/span> from<\/span> '<\/span>.\/components\/App<\/span>'<\/span>\r\n\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>\r\n  <<\/span>ChakraProvider<\/span>><\/span>\r\n    <<\/span>ColorModeScript<\/span> initialColorMode<\/span>=<\/span>\"<\/span>light<\/span>\"<\/span> \/><\/span>\r\n    <<\/span>App<\/span> \/><\/span>\r\n  <<\/span>\/ChakraProvider><\/span>,\r\n<\/span>  document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>)<\/span>\r\n)<\/span>\r\n<\/code><\/pre>\n
                    \u521b\u5efa\u4e00\u4e2a\u540d\u4e3aDashboard.js\u7684\u65b0\u7ec4\u4ef6\uff0c\u5728src\/components\u76ee\u5f55\u4e0b\uff0c\u7528\u4e8e\u8ddf\u8e2a\u5149\u660e\u6a21\u5f0f\u548c\u6697\u9ed1\u6a21\u5f0f\u3002\u5728\u6700\u540e\u90e8\u5206\u542f\u7528\u8be5\u7ec4\u4ef6\u3002<\/p>\n
                    \u521b\u5efa\u7528\u4e8e\u5207\u6362\u6697\u6a21\u5f0f\u7684\u56fe\u6807\u6309\u94ae\u3002<\/p>\n
                    import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\nimport<\/span> {<\/span> VStack<\/span>,<\/span> IconButton<\/span> }<\/span> from<\/span> '<\/span>@chakra-ui\/react<\/span>'<\/span>\r\n\r\nexport<\/span> default<\/span> function<\/span> Dashboard<\/span> (<\/span> )<\/span> {<\/span>\r\nreturn<\/span> (<\/span>\r\n  <<\/span>VSack<\/span>><\/span>\r\n    <<\/span>IconButton<\/span>\r\n        aria<\/span>-<\/span>label<\/span>=<\/span>\"<\/span>Toggle Dark Mode<\/span>\"<\/span>\r\n        m<\/span>=<\/span>\"<\/span>8<\/span>\"<\/span>\r\n        size<\/span>=<\/span>\"<\/span>md<\/span>\"<\/span>\r\n        alignSelf<\/span>=<\/span>\"<\/span>flex-end<\/span>\"<\/span>\r\n      \/><\/span>\r\n  <<\/span>\/VStack<\/span>>\r\n<\/span>)<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                    \u51c6\u5907\u6807\u9898\u548c\u8f93\u5165\u6846<\/p>\n
                    import React, { useState } from 'react'\r\nimport {\r\n  Input,\r\n  VStack,\r\n  HStack,\r\n  IconButton,\r\n  Heading\r\n} from '@chakra-ui\/react'\r\nimport { FiSearch } from 'react-icons\/fi'\r\n\r\nexport default function Dashboard ( ) {\r\n\r\n  const [result, setResult] = useState('')\r\n  const [value, setValue] = useState('')\r\n\r\n return (\r\n<VStack>\r\n      <IconButton\r\n        aria-label=\"Toggle Dark Mode\"\r\n        m=\"8\"\r\n        size=\"md\"\r\n        alignSelf=\"flex-end\"\r\n      \/>\r\n      <Heading mb=\"8\" size=\"xl\">\r\n        Search your city\r\n      <\/Heading>\r\n      <HStack>\r\n        <Input\r\n          type=\"text\"\r\n          placeholder=\"Enter city name\"\r\n          value={result}\r\n          onChange={(event) => setResult(event.target.value)}\r\n        \/>\r\n        <IconButton\r\n          aria-label=\"Search city button\"\r\n          icon={<FiSearch \/>}\r\n          onClick={() => {\r\n            setValue(result)\r\n            getWeather()\r\n            \/\/Errormessage()\r\n          }}\r\n        >\r\n          Search\r\n        <\/IconButton>\r\n      <\/HStack>\r\n<\/VStack>\r\n)\r\n}\r\n<\/code><\/pre>\n
                    \u5b8c\u6210\u8f93\u5165\u5b57\u6bb5\u7684\u521b\u5efa\u3002\u8bb0\u5f55\u8f93\u5165\u5b57\u6bb5\u4e2d\u7684\u6570\u636e\u5230\u63a7\u5236\u53f0\u65e5\u5fd7\uff0c\u5e76\u786e\u8ba4\u72b6\u6001\u662f\u5426\u6b63\u5e38\u5de5\u4f5c\u3002
                    \n* \u5982\u679c\u53d1\u751f\u4efb\u4f55\u9519\u8bef\uff0c\u8bf7\u67e5\u770b\u4e0b\u9762\u7684GitHub\u5b58\u50a8\u5e93\u3002<\/p>\n
                    3. \u8bf7\u6c42\u7684\u5904\u7406 de<\/h2>\n
                    \u4e3a\u4e86\u64cd\u4f5cAPI\uff0c\u9700\u8981\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u5b89\u88c5\u4e00\u4e2a\u7528\u4e8e\u914d\u7f6eGraphQL\u7684\u5305\u3002
                    \n\u5b89\u88c5\u4ee5\u4e0b\u5305\u3002<\/p>\n
                    npm install graphql @apollo\/client\r\n<\/code><\/pre>\n
                    \u5c31\u50cf\u5c06ChakraProvider\u8f93\u5165App\u7ec4\u4ef6\u4e00\u6837\uff0c\u4e5f\u8981\u5c06\u5904\u7406GraphQL\u8bf7\u6c42\u7684App\u8f93\u5165\u3002
                    \n\u5c06src\/components\u76ee\u5f55\u4e2d\u7684App.js\u6587\u4ef6\u66f4\u6539\u5982\u4e0b\u3002<\/p>\n
                    import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\nimport<\/span> {<\/span> ApolloClient<\/span>,<\/span> ApolloProvider<\/span>,<\/span> InMemoryCache<\/span> }<\/span> from<\/span> '<\/span>@apollo\/client<\/span>'<\/span>\r\nimport<\/span> Dashboard<\/span> from<\/span> '<\/span>.\/Dashboard<\/span>'<\/span>\r\n\r\nexport<\/span> default<\/span> function<\/span> App<\/span>()<\/span> {<\/span>\r\n  const<\/span> client<\/span> =<\/span> new<\/span> ApolloClient<\/span>({<\/span>\r\n    cache<\/span>:<\/span> new<\/span> InMemoryCache<\/span>(),<\/span>\r\n    uri<\/span>:<\/span> '<\/span>https:\/\/graphql-weather-api.herokuapp.com\/<\/span>'<\/span>,<\/span>\r\n  })<\/span>\r\n\r\n  return<\/span> (<\/span>\r\n    <<\/span>ApolloProvider<\/span> client<\/span>=<\/span>{<\/span>client<\/span>}<\/span>><\/span>\r\n      <<\/span>Dashboard<\/span> \/><\/span>\r\n    <<\/span>\/ApolloProvider<\/span>>\r\n<\/span>  )<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                    \u5728\u8fd9\u91cc\u6211\u4eec\u5b9a\u4e49\u4e86\u4e00\u4e2a\u5e38\u6570\uff0c\u5e76\u4e14\u8f93\u5165\u4e24\u4e2a\u53c2\u6570\uff08\u7f13\u5b58\u548cURI\uff09\u6765\u521d\u59cb\u5316Apollo\u5ba2\u6237\u7aef\u3002
                    \n\u203b URI\u53c2\u6570\u662f\u9ed8\u8ba4\u7684API\u7aef\u70b9\uff0c\u5728\u8fd9\u91cc\u4f7f\u7528\uff0c\u7f13\u5b58\u662f\u4e3a\u4e86\u9632\u6b62\u5e94\u7528\u7a0b\u5e8f\u5411\u76f8\u540c\u7684\u6570\u636e\u53d1\u9001\u4e0d\u5fc5\u8981\u7684\u8bf7\u6c42\u3002<\/p>\n
                    \u63a5\u4e0b\u6765\uff0c\u521b\u5efa\u4e00\u4e2a\u540d\u4e3aQueries.js\u7684\u65b0\u6587\u4ef6\u3002\u5c06\u8be5\u6587\u4ef6\u521b\u5efa\u5728\u4e00\u4e2a\u540d\u4e3asrc\/components\/graphql\u7684\u4e0d\u540c\u76ee\u5f55\u4e2d\u3002\u8be5\u6587\u4ef6\u5c06\u5b58\u50a8\u4e4b\u524d\u5728Playground\u4e2d\u521b\u5efa\u7684\u67e5\u8be2\u8bed\u53e5\u3002<\/p>\n
                    import<\/span> {<\/span> gql<\/span> }<\/span> from<\/span> '<\/span>@apollo\/client<\/span>'<\/span>\r\n\r\nexport<\/span> const<\/span> GET_WEATHER_QUERY<\/span> =<\/span> gql<\/span>`\r\n  query getCityByName($name: String!) {\r\n    getCityByName(name: $name) {\r\n      name\r\n      country\r\n      weather {\r\n        summary {\r\n          title\r\n          description\r\n        }\r\n        temperature {\r\n          actual\r\n          feelsLike\r\n        }\r\n        wind {\r\n          speed\r\n        }\r\n      }\r\n    }\r\n  }\r\n<\/span><\/code><\/pre>\n
                    \u5982\u679c\u8981\u4f20\u9012\u57ce\u5e02\u7684\u540d\u79f0\uff0c\u8bf7\u5c06\u5176\u4f20\u9012\u7ed9\u8f93\u5165\u5b57\u6bb5\u4e2d\u7684 $name\u3002<\/p>\n
                    \u5982\u679c\u60a8\u60f3\u8be6\u7ec6\u4e86\u89e3GraphQL\u7684\u6a21\u5f0f\u7c7b\u578b\uff0c\u8bf7\u67e5\u9605\u4ee5\u4e0b\u6587\u4ef6\u3002<\/p>\n
                    \u5411API\u7aef\u70b9\u53d1\u9001\u8bf7\u6c42\u5e76\u5c06\u5176\u54cd\u5e94\u8bb0\u5f55\u5230\u65e5\u5fd7\u4e2d\u3002
                    \n\u6253\u5f00Dashboard.js\u6587\u4ef6\uff0c\u5e76\u8fdb\u884c\u4ee5\u4e0b\u66f4\u6539\u3002<\/p>\n
                    import<\/span> {<\/span> useLazyQuery<\/span> }<\/span> from<\/span> '<\/span>@apollo\/client<\/span>'<\/span>\r\nimport<\/span> {<\/span> GET_WEATHER_QUERY<\/span> }<\/span> from<\/span> '<\/span>..\/graphql\/Queries<\/span>'<\/span>\r\n\r\nexport<\/span> default<\/span> function<\/span> Dashboard<\/span> (<\/span> )<\/span> {<\/span>\r\n  const<\/span> [<\/span>getWeather<\/span>,<\/span> {<\/span> loading<\/span>,<\/span> data<\/span>,<\/span> error<\/span> }]<\/span> =<\/span> useLazyQuery<\/span>(<\/span>\r\n    GET_WEATHER_QUERY<\/span>,<\/span>\r\n    {<\/span>\r\n      variables<\/span>:<\/span> {<\/span> name<\/span>:<\/span> value<\/span> },<\/span>\r\n    }<\/span>\r\n  )<\/span>\r\n\r\n\/\/ Search button for input field<\/span>\r\n<<\/span>IconButton<\/span>\r\n    aria<\/span>-<\/span>label<\/span>=<\/span>\"<\/span>Search city button<\/span>\"<\/span>\r\n    icon<\/span>=<\/span>{<\/span><<\/span>FiSearch<\/span> \/><\/span>}<\/span>\r\n    onClick<\/span>=<\/span>{()<\/span> =><\/span> {<\/span>\r\n      setValue<\/span>(<\/span>result<\/span>)<\/span>\r\n      getWeather<\/span>()<\/span>\r\n      }}<\/span>\r\n ><\/span>\r\n    Search<\/span>\r\n<<\/span>\/IconButton<\/span>>\r\n<\/span>}<\/span>\r\n<\/code><\/pre>\n
                    \u5f53\u6309\u94ae\u88ab\u70b9\u51fb\u65f6\uff0c\u4f1a\u89e6\u53d1\u4e24\u4e2a\u4e8b\u4ef6\u3002\u5176\u4e2d\u4e00\u4e2a\u662f\u4f7f\u7528\u5148\u524d\u5b9a\u4e49\u7684setValue()\u72b6\u6001\u548cgetWeather()\u51fd\u6570\uff0c\u901a\u8fc7\u8fd9\u4e9b\uff0c\u8bf7\u6c42\u4f1a\u88ab\u53d1\u9001\u5e76\u83b7\u53d6\u5230\u54cd\u5e94\uff0c\u7136\u540e\u5b58\u50a8\u5728data\u53d8\u91cf\u4e2d\u3002<\/p>\n
                    \u6570\u503c\u7684\u72b6\u6001\u5c06\u4f20\u9012\u7ed9\u4e4b\u524d\u5728src\/components\/graphql\/Queries.js\u6587\u4ef6\u4e2d\u5b9a\u4e49\u7684name\u5c5e\u6027\u3002\u901a\u8fc7\u6267\u884cconsole.log(data)\uff0c\u60a8\u5e94\u8be5\u80fd\u591f\u67e5\u770b\u4eceAPI\u7aef\u70b9\u8fd4\u56de\u7684\u54cd\u5e94\u3002<\/p>\n
                    4. \u4f7f\u7528\u54cd\u5e94\u5c06\u5176\u663e\u793a\u5728\u524d\u7aef\u754c\u9762\u4e0a\u3002<\/h2>\n
                    \u4ece\u7ec8\u70b9\u8fd4\u56de\u7684\u54cd\u5e94\u662f\u4f7f\u7528\u4e4b\u524d\u5728data\u53d8\u91cf\u4e2d\u83b7\u53d6\u7684\u5bf9\u8c61\uff0c\u8fd9\u91cc\u9700\u8981\u5728\u524d\u7aef\u4ee5\u7cbe\u7ec6\u5316\u7684\u8868\u683c\u5f62\u5f0f\u663e\u793a\u54cd\u5e94\u3002\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u5c06\u4f7f\u7528Chakra Ui\u7684Table\u7ec4\u4ef6\u3002<\/p>\n
                    \u5f53\u4f60\u8ff7\u832b\u65f6\uff0c\u8bf7\u53c2\u8003 Chakra UI \u7684\u6587\u6863\u3002<\/p>\n
                    \u5bfc\u5165\u4ee5\u4e0b\u7ec4\u4ef6\u3002<\/p>\n
                    import {\r\n  Stack,\r\n  Table,\r\n  Tbody,\r\n  Tr,\r\n  Td,\r\n  TableCaption,\r\n  StackDivider,\r\n  HStack,\r\n  Divider,\r\n} from '@chakra-ui\/react'\r\n\r\n\/\/ Dashboard component\r\n<Stack>\r\n        <Divider mt=\"4\" mb=\"4\" borderColor=\"gray.100\" \/>\r\n        {data && (\r\n          <>\r\n            <VStack\r\n              divider={<StackDivider \/>}\r\n              borderColor=\"gray.100\"\r\n              borderWidth=\"2px\"\r\n              p=\"4\"\r\n              borderRadius=\"lg\"\r\n              w=\"100%\"\r\n              maxW={{ base: '90vw', sm: '80vw', lg: '50vw', xl: '40vw' }}\r\n              alignItems=\"stretch\"\r\n            >\r\n              <Table variant=\"simple\">\r\n                <TableCaption>\r\n                  Weather in {data.getCityByName.name} right now\r\n                <\/TableCaption>\r\n\r\n                <Tbody>\r\n                  <Tr>\r\n                    <Td>Temperature<\/Td>\r\n\r\n                    <Td textAlign=\"right\">\r\n                      {Math.floor(\r\n                        data.getCityByName.weather.temperature.actual - 273\r\n                      ) + ' '}\r\n                      Deg C\r\n                    <\/Td>\r\n                  <\/Tr>\r\n                  <Tr>\r\n                    <Td>Feels like<\/Td>\r\n                    <Td textAlign=\"right\">\r\n                      {data.getCityByName.weather.summary.description}\r\n                    <\/Td>\r\n                  <\/Tr>\r\n                  <Tr>\r\n                    <Td>Wind speed (mph)<\/Td>\r\n\r\n                    <Td textAlign=\"right\">\r\n                      {data.getCityByName.weather.wind.speed + ' '}\r\n                    <\/Td>\r\n                  <\/Tr>\r\n                <\/Tbody>\r\n              <\/Table>\r\n            <\/VStack>\r\n          <\/>\r\n        )}\r\n      <\/Stack>\r\n<\/code><\/pre>\n
                    \u6700\u91cd\u8981\u7684\u662f\u80fd\u591f\u83b7\u53d6\u6765\u81ea\u54cd\u5e94\u7684\u6570\u636e\uff0c\u5e76\u4e14\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u5c06\u4ece\u54cd\u5e94\u4e2d\u8fd4\u56de\u7684\u5f00\u5c14\u6587\u5355\u4f4d\u901a\u8fc7\u516c\u5f0f – \u6e29\u5ea6\uff08\u5f00\u5c14\u6587\uff09-273 = \u6e29\u5ea6\uff08\u6444\u6c0f\u5ea6\uff09 \u6765\u8f6c\u6362\u4e3a\u6444\u6c0f\u5ea6\u3002<\/p>\n
                    5. \u4f7f\u7528ChakraUI\u663e\u793a\u52a0\u8f7d\u72b6\u6001\u5e76\u542f\u7528\u6697\u9ed1\u6a21\u5f0f\u3002<\/h2>\n
                    \u5f53\u7f16\u5199\u4eceGraphQL\u670d\u52a1\u5668\u83b7\u53d6\u8bf7\u6c42\u7684\u903b\u8f91\u65f6\uff0c\u53ef\u4ee5\u5229\u7528\u62c6\u5c01\uff08destructure\uff09\u53d8\u91cfloading\u7684\u72b6\u6001\u6765\u5224\u65ad\u83b7\u53d6\u8bf7\u6c42\u7684\u8fdb\u7a0b\u662f\u5426\u6b63\u5728\u8fdb\u884c\u4e2d\u3002\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u53ef\u4ee5\u4f7f\u7528Chakra UI\u7684Spinner\u7ec4\u4ef6\u3002<\/p>\n
                    \u4ee5\u4e0b\u662f\u986f\u793a\u65cb\u8f49\u5668\u7684\u908f\u8f2f\u3002<\/p>\n
                    import { spinner } from \"@chakra-ui\/react\" \r\n\/\/ Dashboard.js component\r\n<Stack>\r\n        {loading && (\r\n          <>\r\n            <Spinner\r\n              thickness=\"4px\"\r\n              speed=\"0.65s\"\r\n              emptyColor=\"gray.200\"\r\n              color=\"blue.500\"\r\n              size=\"xl\"\r\n            \/>\r\n          <\/>\r\n        )}\r\n<\/Stack>\r\n<\/code><\/pre>\n
                    \u4f7f\u7528\u7b97\u5b50\u65f6\uff0c\u53ea\u6709\u5728\u8bfb\u53d6\u72b6\u6001\u4e3atrue\u7684\u60c5\u51b5\u4e0b\u624d\u4f1a\u663e\u793a\u65cb\u8f6c\u7ec4\u4ef6\u3002<\/p>\n
                    \u90a3\u4e48\uff0c\u8ba9\u6211\u4eec\u542f\u7528\u5e94\u7528\u7a0b\u5e8f\u7684\u6697\u9ed1\u6a21\u5f0f\u3002<\/p>\n
                    \u8f6c\u5230Dashboard.js\u6587\u4ef6\uff0c\u4f7f\u6697\u6a21\u5f0f\u5207\u6362\u6309\u94ae\u751f\u6548\u3002<\/p>\n
                    import<\/span> {<\/span> useColorMode<\/span> }<\/span> from<\/span> \"<\/span>@chakra-ui\/react\r\n\/\/ for the icon to change on toggle - \r\n\/\/ if light: show Moon Icon else show Sun Icon\r\nimport { FiMoon, FiSun } from 'react-icons\/fi'\r\n\r\nconst { colorMode, toggleColorMode } = useColorMode()\r\n\r\n\/\/ toggle button for dark\/light mode\r\n<IconButton\r\n        aria-label=<\/span>\"<\/span>Toggle<\/span> Dark<\/span> Mode<\/span>\"<\/span>\r\n        icon={colorMode === 'light' ? <FiMoon \/> : <FiSun \/>}\r\n        m=<\/span>\"<\/span>8<\/span>\"<\/span>\r\n        size=<\/span>\"<\/span>md<\/span>\"<\/span>\r\n        alignSelf=<\/span>\"<\/span>flex<\/span>-<\/span>end<\/span>\"<\/span>\r\n        onClick={toggleColorMode}\r\n\/>\r\n<\/span><\/code><\/pre>\n
                    \u5f53\u7528\u6237\u70b9\u51fb\u6309\u94ae\u65f6\uff0ctoggleColorMode\u5c06\u88ab\u8c03\u7528\uff0c\u8fd9\u5c06\u5bfc\u81f4colorMode\u7684\u72b6\u6001\u53d1\u751f\u53d8\u5316\uff0c\u5e76\u6839\u636e\u4e09\u5143\u8fd0\u7b97\u7b26\u6765\u6539\u53d8\u56fe\u6807\u3002\u73b0\u5728\uff0c\u53ef\u4ee5\u81ea\u7531\u5730\u4f7f\u7528Weather\u5e94\u7528\u7a0b\u5e8f\u4e86\u3002<\/p>\n
                    \u7528\u4e8e\u5efa\u8bbe\u9879\u76ee\u7684\u8d44\u6e90<\/h2>\n
                    \u8bf7\u53c2\u8003\u4ee5\u4e0b\u7f51\u7ad9\u3002<\/h2>\n
                    \u4f7f\u7528GraphQL\u548cChakra UI\u6784\u5efa\u4e00\u4e2a\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f
                    \nGraphQL\u662f\u4ec0\u4e48\uff1f\u4ecb\u7ecd\u4e0eREST\u7684\u533a\u522b\u548c\u5b9e\u65bd\u6848\u4f8b<\/p>\n","protected":false},"excerpt":{"rendered":"
                    \u9996\u5148 \u5b66\u4e60\u7684\u539f\u56e0\u548c\u7ecf\u8fc7 2020\u5e74\u5f00\u59cb\uff0c\u6211\u51b3\u5b9a\u4ece\u96f6\u5f00\u59cb\u8f6c\u804c\u6210\u4e3a\u4e00\u540d\u5de5\u7a0b\u5e08\uff0c\u5e76\u8fdb\u5165\u67d0\u7f16\u7a0b\u5b66\u6821\u5b66\u4e60\u3002\u5165\u5b66\u540e\u6211\u53d1\u73b0\u5f88 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-48164","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u6211\u7528React\u5236\u4f5c\u4e86\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u30102\u3011\u3010\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f\u2461\u3011 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u7528react\u5236\u4f5c\u4e86\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u30102\u3011\u3010\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f\u2461\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u6211\u7528React\u5236\u4f5c\u4e86\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u30102\u3011\u3010\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f\u2461\u3011\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148 \u5b66\u4e60\u7684\u539f\u56e0\u548c\u7ecf\u8fc7 2020\u5e74\u5f00\u59cb\uff0c\u6211\u51b3\u5b9a\u4ece\u96f6\u5f00\u59cb\u8f6c\u804c\u6210\u4e3a\u4e00\u540d\u5de5\u7a0b\u5e08\uff0c\u5e76\u8fdb\u5165\u67d0\u7f16\u7a0b\u5b66\u6821\u5b66\u4e60\u3002\u5165\u5b66\u540e\u6211\u53d1\u73b0\u5f88 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u7528react\u5236\u4f5c\u4e86\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u30102\u3011\u3010\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f\u2461\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-06T06:54:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-15T04:32:24+00:00\" \/>\n<meta name=\"author\" content=\"\u97f5, \u79d1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u97f5, \u79d1\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/\",\"name\":\"\u6211\u7528React\u5236\u4f5c\u4e86\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u30102\u3011\u3010\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f\u2461\u3011 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-05-06T06:54:47+00:00\",\"dateModified\":\"2024-01-15T04:32:24+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u6211\u7528React\u5236\u4f5c\u4e86\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u30102\u3011\u3010\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f\u2461\u3011\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e\",\"name\":\"\u97f5, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g\",\"caption\":\"\u97f5, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yunke\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u6211\u7528React\u5236\u4f5c\u4e86\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u30102\u3011\u3010\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f\u2461\u3011 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u7528react\u5236\u4f5c\u4e86\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u30102\u3011\u3010\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f\u2461\/","og_locale":"zh_CN","og_type":"article","og_title":"\u6211\u7528React\u5236\u4f5c\u4e86\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u30102\u3011\u3010\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f\u2461\u3011","og_description":"\u9996\u5148 \u5b66\u4e60\u7684\u539f\u56e0\u548c\u7ecf\u8fc7 2020\u5e74\u5f00\u59cb\uff0c\u6211\u51b3\u5b9a\u4ece\u96f6\u5f00\u59cb\u8f6c\u804c\u6210\u4e3a\u4e00\u540d\u5de5\u7a0b\u5e08\uff0c\u5e76\u8fdb\u5165\u67d0\u7f16\u7a0b\u5b66\u6821\u5b66\u4e60\u3002\u5165\u5b66\u540e\u6211\u53d1\u73b0\u5f88 […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u7528react\u5236\u4f5c\u4e86\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u30102\u3011\u3010\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f\u2461\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-05-06T06:54:47+00:00","article_modified_time":"2024-01-15T04:32:24+00:00","author":"\u97f5, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u97f5, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/","name":"\u6211\u7528React\u5236\u4f5c\u4e86\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u30102\u3011\u3010\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f\u2461\u3011 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-05-06T06:54:47+00:00","dateModified":"2024-01-15T04:32:24+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u6211\u7528React\u5236\u4f5c\u4e86\u4e00\u4e2a\u5e94\u7528\u7a0b\u5e8f\u30102\u3011\u3010\u5929\u6c14\u5e94\u7528\u7a0b\u5e8f\u2461\u3011"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e","name":"\u97f5, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g","caption":"\u97f5, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yunke\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e7%94%a8react%e5%88%b6%e4%bd%9c%e4%ba%86%e4%b8%80%e4%b8%aa%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e3%80%902%e3%80%91%e3%80%90%e5%a4%a9%e6%b0%94%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e2%91%a1\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=48164"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48164\/revisions"}],"predecessor-version":[{"id":59493,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48164\/revisions\/59493"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=48164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=48164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=48164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}