{"id":38601,"date":"2023-07-31T10:29:46","date_gmt":"2023-12-22T13:13:20","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/"},"modified":"2024-04-30T16:15:59","modified_gmt":"2024-04-30T08:15:59","slug":"%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/","title":{"rendered":"\u53cd\u5e94\u6ce8\u89e3"},"content":{"rendered":"

\u7ae0\u8282\u76ee\u5f55<\/h2>\n
    \n
  1. \n
      \u6307\u4ee4<\/ol>\n<\/li>\n<\/ol>\n

       <\/p>\n

        \n
      1. \n
          JSX<\/ol>\n<\/li>\n<\/ol>\n

           <\/p>\n

            \n
          1. \n
              \u5c5e\u6027<\/ol>\n<\/li>\n<\/ol>\n

               <\/p>\n

                \n
              1. \n
                  \u6761\u4ef6\u5224\u65ad\u548c\u5faa\u73af\u5904\u7406<\/ol>\n<\/li>\n<\/ol>\n

                   <\/p>\n

                    \n
                  1. \n
                      \u72b6\u6001\u548c\u4e8b\u4ef6\u5904\u7406<\/ol>\n<\/li>\n<\/ol>\n

                       <\/p>\n

                        \u8def\u7531<\/ol>\n

                        1. \u547d\u4ee4<\/h2>\n
                        # create-react-app\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/span>\r\n$ <\/span>npm install<\/span> -g<\/span> create-react-app\r\n\r\n# \u65b0\u898f\u4f5c\u6210<\/span>\r\n$ <\/span>npx create-react-app [<\/span>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d]\r\n\r\n# TSX(JSX\u306eTypeScript\u7248)\u3067\u4f5c\u308a\u305f\u3044\u6642<\/span>\r\n# --template typescript\u3092\u3064\u3051\u308b<\/span>\r\n$ <\/span>npx create-react-app --template<\/span> typescript [<\/span>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u540d]\r\n\r\n# \u958b\u767a\u30b5\u30fc\u30d0\u30fc\u8d77\u52d5<\/span>\r\n$ <\/span>npm start\r\n\r\n# \u30d3\u30eb\u30c9\u3057\u3066HTML\/CSS\/JS\u30d5\u30a1\u30a4\u30eb\u3092\u751f\u6210<\/span>\r\n$ <\/span>npm run build\r\n<\/code><\/pre>\n
                        JSX\u662f\u4e00\u79cd\u7528\u4e8e\u7f16\u5199React\u7ec4\u4ef6\u7684\u8bed\u6cd5\u3002<\/h2>\n
                          \n
                        • \n
                            class\u306fclassName, for\u306fhtmlFor\u3067\u66f8\u304f<\/ul>\n<\/li>\n<\/ul>\n
                             <\/p>\n
                              {\u5909\u6570\u540d} \u306e\u5f62\u5f0f\u3067\u57cb\u3081\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u308b<\/ul>\n
                              index.js\uff08\u9996\u5148\u88ab\u8c03\u7528\u7684\u6587\u4ef6\uff09<\/h3>\n
                              \/\/React\u95a2\u9023\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30dd\u30fc\u30c8<\/span>\r\nimport<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom<\/span>'<\/span>;<\/span>\r\n\r\n\/\/\u30a2\u30d7\u30ea\u56fa\u6709\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u30a4\u30f3\u30dd\u30fc\u30c8<\/span>\r\nimport<\/span> '<\/span>.\/index.css<\/span>'<\/span>;<\/span>\r\nimport<\/span> App<\/span> from<\/span> '<\/span>.\/App<\/span>'<\/span>;<\/span>\r\n\r\n\/\/\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u305f\u3081\u306e\u30b5\u30fc\u30d3\u30b9\u3092\u30a4\u30f3\u30dd\u30fc\u30c8<\/span>\r\nimport<\/span> reportWebVitals<\/span> from<\/span> '<\/span>.\/reportWebVitals<\/span>'<\/span>;<\/span>\r\n\r\n\/\/App\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5b9f\u884c<\/span>\r\n\/\/render(comp, target)<\/span>\r\n\/\/comp: \u51fa\u529b\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/span>\r\n\/\/target: \u51fa\u529b\u5148\u306e\u8981\u7d20<\/span>\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>\r\n  <<\/span>App<\/span> \/>,<\/span>\r\n  document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>)<\/span>\r\n);<\/span>\r\n\r\n\/\/\u30b5\u30fc\u30d3\u30b9\u3092\u6709\u52b9\u5316<\/span>\r\nregisterServiceWorker<\/span>();<\/span>\r\n<\/code><\/pre>\n
                              \u7ec4\u4ef6\u6587\u4ef6<\/h3>\n
                              \/\/React\u306e\u57fa\u672c\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u30a4\u30f3\u30dd\u30fc\u30c8<\/span>\r\nimport<\/span> React<\/span>,<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\n\r\n\/\/\u30ed\u30b4\u753b\u50cf\/\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8<\/span>\r\nimport<\/span> logo<\/span> from<\/span> '<\/span>.\/log.svg<\/span>'<\/span>;<\/span>\r\nimport<\/span> '<\/span>.\/App.css<\/span>'<\/span>;<\/span>\r\n\r\n\/\/App\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5b9a\u7fa9<\/span>\r\nclass<\/span> App<\/span> extends<\/span> Component<\/span> {<\/span>\r\n\r\n  \/\/\u63cf\u753b\u5185\u5bb9\u3092\u6e96\u5099<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      \/\/class \u2192 className\u306b\u3059\u308b\u3053\u3068<\/span>\r\n      <<\/span>div<\/span> className<\/span>=<\/span>\"App\"<\/span>><\/span>\r\n        <<\/span>header<\/span> className<\/span>=<\/span>\"App-header\"<\/span>><\/span>\r\n          <<\/span>img<\/span> src<\/span>=<\/span>{<\/span>logo<\/span>}<\/span> className<\/span>=<\/span>\"App-logo\"<\/span> alt<\/span>=<\/span>\"logo\"<\/span> \/><\/span>\r\n          <<\/span>p<\/span>><\/span>\r\n            Edit <<\/span>code<\/span>><\/span>src\/App.js<\/<\/span>code<\/span>><\/span> and save to reload.\r\n          <\/<\/span>p<\/span>><\/span>\r\n          <<\/span>a<\/span>\r\n            className<\/span>=<\/span>\"App-link\"<\/span>\r\n            href<\/span>=<\/span>\"https:\/\/reactjs.org\"<\/span>\r\n            target<\/span>=<\/span>\"_blank\"<\/span>\r\n            rel<\/span>=<\/span>\"noopener noreferrer\"<\/span>\r\n          ><\/span>\r\n          Learn React\r\n          <\/<\/span>a<\/span>><\/span>\r\n        <\/<\/span>header<\/span>><\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n    );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\n\/\/App\u30af\u30e9\u30b9\u3092\u30a8\u30af\u30b9\u30dd\u30fc\u30c8<\/span>\r\nexport<\/span> default<\/span> App<\/span>;<\/span>\r\n<\/code><\/pre>\n
                              React.Fragment\uff08dummy element\uff09<\/h3>\n
                              \/\/React.Fragment\u306f\u6700\u7d42\u7684\u306a\u51fa\u529b\u306b\u306f\u542b\u307e\u308c\u306a\u3044<\/span>\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>\r\n  <<\/span>React<\/span>.<\/span>Fragment<\/span>><\/span>\r\n    <<\/span>p<\/span>><\/span>\u3042\u3044\u3046\u3048\u304a<\/<\/span>p<\/span>><\/span>\r\n    <<\/span>p<\/span>><\/span>\u304b\u304d\u304f\u3051\u3053<\/<\/span>p<\/span>><\/span>\r\n  <\/<\/span>React<\/span>.<\/span>Fragment<\/span>><\/span>\r\n  ,<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>);<\/span>\r\n);<\/span>\r\n<\/code><\/pre>\n
                              \u8bbe\u5b9a\u5c5e\u6027<\/h3>\n
                              \/\/\u5c5e\u6027\u5024\u524d\u5f8c\u306e\u30af\u30a9\u30fc\u30c8\u306f\u4ed8\u3051\u306a\u3044<\/span>\r\n\/\/href=\"{url}\"\u3060\u3068\u30c0\u30e1<\/span>\r\nconst<\/span> url<\/span> =<\/span> '<\/span>https:\/\/wings.msn.to\/<\/span>'<\/span>;<\/span>\r\n<<\/span>a<\/span> href<\/span>=<\/span>{<\/span>url<\/span>}<\/span>><\/span>Web\u30b5\u30a4\u30c8<\/<\/span>a<\/span>><\/span>\r\n\r\n\/\/style\u5c5e\u6027\u306e\u6307\u5b9a\u306b\u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u5229\u7528\u3059\u308b<\/span>\r\n\/\/\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30ea\u30c6\u30e9\u30eb\u3067\u306fcamelCase\u8a18\u6cd5\u306b\u76f4\u3059<\/span>\r\nconst<\/span> style<\/span> =<\/span> {<\/span> color<\/span>:<\/span> '<\/span>Red<\/span>'<\/span>,<\/span> backgroundColor<\/span>:<\/span> '<\/span>Yellow<\/span>'<\/span> };<\/span>\r\n<<\/span>p<\/span> style<\/span>=<\/span>{<\/span>style<\/span>}<\/span>><\/span>\u3042\u3044\u3046\u3048\u304a<\/<\/span>p<\/span>><\/span>\r\n\r\n\/\/\u5c5e\u6027\u3092\u307e\u3068\u3081\u3066\u8a2d\u5b9a<\/span>\r\n\/\/\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30ea\u30c6\u30e9\u30eb\u3068\u300c...\u300d\u6f14\u7b97\u5b50\u3092\u5229\u7528\u3059\u308b<\/span>\r\nconst<\/span> attrs<\/span> =<\/span> {<\/span>\r\n  src<\/span>:<\/span> '<\/span>http:\/\/test\/image\/aiueo.jpg<\/span>'<\/span>,<\/span>\r\n  alt<\/span>:<\/span> '<\/span>\u3042\u3044\u3046\u3048\u304a<\/span>'<\/span>,<\/span>\r\n  title<\/span>:<\/span> '<\/span>\u30c6\u30b9\u30c8\u3042\u3044\u3046\u3048\u304a<\/span>'<\/span>\r\n};<\/span>\r\n<<\/span>img<\/span> {<\/span>...<\/span>attrs<\/span>}<\/span> \/><\/span>\r\n<\/code><\/pre>\n
                              \u5c06\u7ec4\u4ef6\u5d4c\u5957<\/h3>\n
                              import<\/span> React<\/span>,<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\n\/\/\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8<\/span>\r\nimport<\/span> MyCover<\/span> from<\/span> '<\/span>.\/MyCover<\/span>'<\/span>;<\/span>\r\n\r\nexport<\/span> default<\/span> class<\/span> MyBook<\/span> extends<\/span> Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>div<\/span>><\/span>\r\n        {<\/span>\/* MyCover\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u547c\u3073\u51fa\u3057 *\/<\/span>}<\/span>\r\n        <<\/span>MyCover<\/span> title<\/span>=<\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>info<\/span>.<\/span>title<\/span>}<\/span> \/><\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                              3. \u9053\u5177<\/h2>\n
                              props\u662f\u4ec0\u4e48\u610f\u601d\uff1f<\/h3>\n
                              \u5728\u7ec4\u4ef6\u4e2d\u5c06\u5bf9\u8c61\u4f5c\u4e3a\u5355\u4e00\u5bf9\u8c61\u4f20\u9012\u7ed9\u8be5\u7ec4\u4ef6\u3002
                              \n\u53ef\u4ee5\u5728JSX\u5185\u4f20\u9012\u5c5e\u6027\u4fe1\u606f\u548c\u5b50\u5143\u7d20\u3002<\/p>\n
                              \/\/\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5074<\/span>\r\nimport<\/span> React<\/span>,<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\n\r\nexport<\/span> default<\/span> class<\/span> MyHello<\/span> extends<\/span> Component<\/span> {<\/span>\r\n  \/\/\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5143\u306b\u51fa\u529b\u3092\u751f\u6210<\/span>\r\n  render<\/span>(){<\/span>\r\n    return<\/span> <<\/span>div<\/span>><\/span>\u3053\u3093\u306b\u3061\u306f\u3001{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>name<\/span>}<\/span>\u3055\u3093<\/<\/span>div<\/span>>;<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\n\/\/index.js<\/span>\r\nimport<\/span> MyHello<\/span> from<\/span> '<\/span>.\/MyHello<\/span>'<\/span>;<\/span>\r\n...<\/span>\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>\r\n  \/\/MyHello\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5f15\u304d\u6e21\u3059<\/span>\r\n  \/\/\u3053\u306e\u5834\u5408\u306f\u300cname\u300d\u3092\u6e21\u3059<\/span>\r\n  <<\/span>MyHello<\/span> name<\/span>=<\/span>\"\u9234\u6728\"<\/span> \/>,<\/span>\r\n  document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>);<\/span>\r\n);<\/span>\r\n<\/code><\/pre>\n
                                \u300c…\u300d\u6f14\u7b97\u5b50\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u5185\u5bb9\u3092\u500b\u3005\u306e\u5c5e\u6027\u306b\u3070\u3089\u3059\u3053\u3068\u3082\u53ef\u80fd\u3002<\/ul>\n
                                const<\/span> data<\/span> =<\/span> {<\/span>\r\n  name<\/span>:<\/span> '<\/span>\u9234\u6728<\/span>'<\/span>,<\/span>\r\n  age<\/span>:<\/span> 18<\/span>,<\/span>\r\n  sex<\/span>:<\/span> '<\/span>\u7537<\/span>'<\/span>\r\n};<\/span>\r\n\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>\r\n  <<\/span>MyClass<\/span> {<\/span>...<\/span>data<\/span>}<\/span> \/>,<\/span>\r\n  document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>)<\/span>\r\n);<\/span>\r\n<\/code><\/pre>\n
                                4. \u6761\u4ef6\u5224\u65ad\u548c\u5faa\u73af\u5904\u7406<\/h2>\n
                                \u6761\u4ef6\u5206\u652f<\/h3>\n
                                \u300c?:\u300d\u8fd0\u7b97\u7b26\uff0c\u300c&&\u300d\u8fd0\u7b97\u7b26<\/h4>\n
                                  \n
                                • \n
                                    \u300c?:\u300d\u6f14\u7b97\u5b50\u306f\u3001\u4e09\u9805\u6f14\u7b97\u5b50\u306e\u3088\u3046\u306a\u4f7f\u3044\u65b9<\/ul>\n<\/li>\n<\/ul>\n
                                     <\/p>\n
                                      \u300c&&\u300d\u6f14\u7b97\u5b50\u306f\u3001true\u306e\u6642\u3060\u3051\u51fa\u529b\u3055\u308c\u308b<\/ul>\n
                                      \/\/\u300c?:\u300d\u6f14\u7b97\u5b50<\/span>\r\n{<\/span> this<\/span>.<\/span>props<\/span>.<\/span>isNew<\/span> ?<\/span> <<\/span>MyNew<\/span> \/><\/span> :<\/span> null<\/span> }<\/span>\r\n\r\n\/\/\u300c&&\u300d\u6f14\u7b97\u5b50<\/span>\r\n{<\/span> this<\/span>.<\/span>props<\/span>.<\/span>isNew<\/span> &&<\/span> <<\/span>MyNew<\/span> \/><\/span> }<\/span>\r\n<\/code><\/pre>\n
                                      \u7acb\u5373\u6267\u884c\u51fd\u6570<\/h4>\n
                                      \/\/\u95a2\u6570\u3092\u4f7f\u3046<\/span>\r\n\/\/\u898b\u6804\u3048\u304c\u60aa\u304f\u306a\u308b\u306e\u3067\u3001\u306a\u308b\u3079\u304f\u5148\u306b\u540d\u524d\u4ed8\u304d\u3067\u95a2\u6570\u3092\u4f5c\u3063\u3066\u3001\u305d\u308c\u3092\u5229\u7528\u3059\u308b\u3088\u3046\u306b\u3059\u308b<\/span>\r\n{(()<\/span> =><\/span> {<\/span>\r\n  if<\/span>(<\/span>this<\/span>.<\/span>props<\/span>.<\/span>isNew<\/span>){<\/span>\r\n    return<\/span> <<\/span>MyNew<\/span> \/><\/span>\r\n  }<\/span>\r\n})()}<\/span>\r\n<\/code><\/pre>\n
                                      \u8fed\u4ee3\u5904\u7406<\/h3>\n
                                      \u5229\u7528Array\u7684map\u65b9\u6cd5<\/p>\n
                                      const<\/span> data<\/span> =<\/span> [<\/span>\r\n  {<\/span> name<\/span>:<\/span> '<\/span>\u9234\u6728<\/span>'<\/span>,<\/span> age<\/span>:<\/span> 18<\/span>,<\/span> sex<\/span>:<\/span> '<\/span>\u7537<\/span>'<\/span>,<\/span> userid<\/span>=<\/span>1<\/span> },<\/span>\r\n  {<\/span> name<\/span>:<\/span> '<\/span>\u4f50\u85e4<\/span>'<\/span>,<\/span> age<\/span>:<\/span> 20<\/span>,<\/span> sex<\/span>:<\/span> '<\/span>\u5973<\/span>'<\/span>,<\/span> userid<\/span>=<\/span>2<\/span> },<\/span>\r\n};<\/span>\r\n\r\n\/\/index.js<\/span>\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>\r\n  \/\/\u914d\u5217data\u3092\u4f7f\u3063\u3066\u306e\u7e70\u308a\u8fd4\u3057\u51e6\u7406<\/span>\r\n  <<\/span>div<\/span>><\/span>\r\n    {<\/span>data<\/span>.<\/span>map<\/span>((<\/span>x<\/span>)<\/span> =><\/span> \r\n      <<\/span>MyClass<\/span> {<\/span>...<\/span>x<\/span>}<\/span> \/>)<\/span>}<\/span>\r\n  <\/<\/span>div<\/span>><\/span>\r\n)<\/span>\r\n\r\n\/\/key\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6301\u305f\u306a\u3044\u3053\u3068\u306b\u3088\u308b\u8b66\u544a\u5bfe\u51e6\u306e\u305f\u3081<\/span>\r\n\/\/\u4ee5\u4e0b\u306e\u3088\u3046\u306bkey\u5c5e\u6027\u3092\u6301\u3064\u3053\u3068\u3092\u63a8\u5968<\/span>\r\n\/\/\u4e3b\u30ad\u30fc\u3092\u6301\u305f\u306a\u3044\u5834\u5408\u306fkey={index}\u3068\u3059\u308b\u306e\u3082OK<\/span>\r\n\/\/<MyClass {...x} key={x.userid} \/><\/span>\r\n<\/code><\/pre>\n
                                      5. \u72b6\u6001\u548c\u4e8b\u4ef6\u5904\u7406<\/h2>\n
                                      “State\u662f\u4ec0\u4e48\u610f\u601d\uff1f”<\/h3>\n
                                        \n
                                      • \n
                                          \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u72b6\u614b(state)\u3092\u7ba1\u7406\u3059\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3002<\/ul>\n<\/li>\n<\/ul>\n
                                           <\/p>\n
                                            state\u306e\u5024\u3092\u66f4\u65b0\u3059\u308b\u5834\u5408\u306f\u3001setState\u3092\u4f7f\u7528\u3059\u308b<\/ul>\n
                                            export<\/span> default<\/span> class<\/span> MyState<\/span> extends<\/span> Component<\/span> {<\/span>\r\n\r\n  constructor<\/span>(<\/span>props<\/span>)<\/span> {<\/span>\r\n    super<\/span>(<\/span>props<\/span>);<\/span>\r\n\r\n    \/\/State\u306e\u521d\u671f\u5024\u3092\u8a2d\u5b9a<\/span>\r\n    this<\/span>.<\/span>state<\/span> =<\/span> {<\/span>\r\n      current<\/span>:<\/span> new<\/span> Date<\/span>()<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n\r\n  \/\/1000\u30df\u30ea\u79d2\u304a\u304d\u306bState\u3092\u66f4\u65b0<\/span>\r\n  \/\/setState\u3092\u4f7f\u7528\u3059\u308b<\/span>\r\n  setInterval<\/span>(()<\/span> =><\/span> {<\/span>\r\n    this<\/span>.<\/span>setState<\/span>({<\/span>\r\n      current<\/span>:<\/span> new<\/span> Date<\/span>()<\/span>\r\n    });<\/span>\r\n  },<\/span> 1000<\/span>)<\/span>\r\n\r\n  render<\/span>()<\/span> {<\/span>\r\n    \/\/current\u306e\u5024\u3092\u30da\u30fc\u30b8\u306b\u53cd\u6620<\/span>\r\n    <<\/span>div<\/span>><\/span>{<\/span>this<\/span>.<\/span>state<\/span>.<\/span>current<\/span>.<\/span>toLocaleString<\/span>()<\/span>}<\/span><\/<\/span>div<\/span>><\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                            \u4e8b\u4ef6\u5904\u7406<\/h3>\n
                                              \n
                                            • \n
                                                HTML\u3067\u306fonchange(\u5168\u3066\u5c0f\u6587\u5b57)\u3060\u304c\u3001JSX\u3067\u306fonChange(cameCase\u5f62\u5f0f)\u3067\u66f8\u304f<\/ul>\n<\/li>\n<\/ul>\n
                                                 <\/p>\n
                                                  this.\u95a2\u6570\u540d.bind\u3067\u30a4\u30d9\u30f3\u30c8\u5b9f\u884c\u6642\u306e\u95a2\u6570\u3092\u6307\u5b9a(bind\u3092\u4ed8\u3051\u306a\u3044\u3068\u30a8\u30e9\u30fc\u306b\u306a\u308b)<\/ul>\n
                                                  \/\/onchange\u30a4\u30d9\u30f3\u30c8\u3092\u8d77\u3053\u3059<\/span>\r\n<<\/span>input<\/span> id<\/span>=<\/span>\"txtName\"<\/span> type<\/span>=<\/span>\"text\"<\/span> onChange<\/span>=<\/span>{<\/span>this<\/span>.<\/span>show<\/span>.<\/span>bind<\/span>(<\/span>this<\/span>)<\/span>}<\/span> \/><\/span>\r\n\r\n\/\/\u30a2\u30ed\u30fc\u95a2\u6570\u3067\u6307\u5b9a\u3059\u308b\u5834\u5408<\/span>\r\n<<\/span>input<\/span> id<\/span>=<\/span>\"txtName\"<\/span> type<\/span>=<\/span>\"text\"<\/span> onChange<\/span>=<\/span>{<\/span>(<\/span>e<\/span>)<\/span> =><\/span> this<\/span>.<\/span>show<\/span>(<\/span>e<\/span>)<\/span>}<\/span>\r\n\r\n\/\/\u5f15\u6570\u3092\u6e21\u3059\u5834\u5408<\/span>\r\nshow<\/span>(<\/span>end<\/span>,<\/span> e<\/span>)<\/span> {<\/span>\r\n  console<\/span>.<\/span>log<\/span>(<\/span>`<\/span>${<\/span>e<\/span>.<\/span>target<\/span>.<\/span>value<\/span>}${<\/span>end<\/span>}<\/span>`<\/span>);<\/span>\r\n}<\/span>\r\n...<\/span>\r\n\/\/\u5143\u3005\u306e\u30a4\u30d9\u30f3\u30c8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u3001\u5f15\u6570\u30ea\u30b9\u30c8\u306e\u672b\u5c3e\u306b\u6e21\u3055\u308c\u308b<\/span>\r\n\/\/end => '\u3055\u3093'<\/span>\r\n\/\/e => this<\/span>\r\n\/\/\u304c\u305d\u308c\u305e\u308c\u308f\u305f\u3055\u308c\u308b<\/span>\r\n<<\/span>input<\/span> id<\/span>=<\/span>\"txtName\"<\/span> type<\/span>=<\/span>\"text\"<\/span> onChange<\/span>=<\/span>{<\/span>this<\/span>.<\/span>show<\/span>.<\/span>bind<\/span>(<\/span>this<\/span>,<\/span> '<\/span>\u3055\u3093<\/span>'<\/span>)<\/span>}<\/span> \/><\/span>\r\n<\/code><\/pre>\n
                                                  \u751f\u547d\u5468\u671f\u65b9\u6cd5<\/h3>\n
                                                  \u5f85\u4f1a\u513f\u5199<\/p>\n
                                                  6. \u8def\u7531<\/h2>\n
                                                    \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u6a5f\u80fd\u7528\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3068\u3057\u3066React Router\u304c\u3042\u308b<\/ul>\n
                                                    # React Router\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/span>\r\n$ <\/span>npm install<\/span> --save<\/span> react-router-dom\r\n<\/code><\/pre>\n
                                                    \u8def\u7531\u793a\u4f8b<\/h3>\n
                                                      \n
                                                    • \n
                                                        \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u8a2d\u5b9a\u306f\u3067\u5b9a\u7fa9\u3059\u308b<\/ul>\n<\/li>\n<\/ul>\n
                                                        \u3067\u62ec\u3063\u3066\u3044\u308b\u306e\u306f\u3001\u6700\u521d\u306b\u5408\u81f4\u3057\u305f\u8981\u7d20\u3060\u3051\u51fa\u529b\u3059\u308b\u3001\u3068\u3044\u3046\u610f\u5473
                                                        \nexact\u5c5e\u6027\u306f\u3001\u5b8c\u5168\u4e00\u81f4\u3067\u5224\u5b9a\u3059\u308b\u3068\u3044\u3046\u610f\u5473<\/p>\n
                                                        \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u7d4c\u7531\u3067\u306e\u30da\u30fc\u30b8\u9077\u79fb\u306f\u3001\u3067\u5b9a\u7fa9\u3059\u308b<\/p>\n
                                                        import<\/span> React<\/span>,<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\n\r\n\/\/\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u95a2\u9023\u306e\u6a5f\u80fd\u3092\u30a4\u30f3\u30dd\u30fc\u30c8<\/span>\r\nimport<\/span> {<\/span> BrowserRouter<\/span> as<\/span> Router<\/span>,<\/span> Link<\/span>,<\/span> Route<\/span>,<\/span> Switch<\/span> }<\/span> from<\/span> '<\/span>react-router-dom<\/span>'<\/span>;<\/span>\r\n\r\n\/\/\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3067\u5229\u7528\u3059\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30a4\u30f3\u30dd\u30fc\u30c8<\/span>\r\nimport<\/span> MyTop<\/span> from<\/span> '<\/span>.\/MyTop<\/span>'<\/span>;<\/span>\r\nimport<\/span> MyHello<\/span> from<\/span> '<\/span>.\/MyHello<\/span>'<\/span>;<\/span>\r\nimport<\/span> MyArticle<\/span> from<\/span> '<\/span>.\/MyArticle<\/span>'<\/span>;<\/span>\r\n\r\nexport<\/span> default<\/span> class<\/span> App<\/span> extends<\/span> Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    \/\/Router(BrowserRouter)\u3067\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u6a5f\u80fd\u3092\u6709\u52b9\u5316<\/span>\r\n    return<\/span>(<\/span>\r\n      <<\/span>Router<\/span>><\/span>\r\n        <<\/span>div<\/span>><\/span>\r\n          {<\/span>\/* \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u7d4c\u7531\u306e\u30ea\u30f3\u30af\u30ea\u30b9\u30c8\u3092\u6e96\u5099 *\/<\/span>}<\/span>\r\n          <<\/span>ul<\/span>><\/span>\r\n            <<\/span>li<\/span>><<\/span>Link<\/span> to<\/span>=<\/span>\"\/\"<\/span>><\/span>\u30c8\u30c3\u30d7<\/<\/span>Link<\/span>><\/<\/span>li<\/span>><\/span>\r\n            <<\/span>li<\/span>><<\/span>Link<\/span> to<\/span>=<\/span>\"\/hello\"<\/span>><\/span>Hello<\/<\/span>Link<\/span>><\/<\/span>li<\/span>><\/span>\r\n            <<\/span>li<\/span>><<\/span>Link<\/span> to<\/span>=<\/span>\"\/article\"<\/span>><\/span>\u516c\u958b\u8a18\u4e8b<\/<\/span>Link<\/span>><\/<\/span>li<\/span>><\/span>\r\n          <\/<\/span>ul<\/span>><\/span>\r\n          <<\/span>hr<\/span> \/><\/span>\r\n\r\n          {<\/span>\/* \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u8a2d\u5b9a(\u6761\u4ef6\u306b\u30de\u30c3\u30c1\u3057\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u51fa\u529b) *\/<\/span>}<\/span>\r\n          <<\/span>Switch<\/span>><\/span>\r\n            <<\/span>Route<\/span> exact<\/span> path<\/span>=<\/span>\"\/\"<\/span> component<\/span>=<\/span>{<\/span>MyTop<\/span>}<\/span> \/><\/span>\r\n            <<\/span>Route<\/span>\u3000<\/span>path<\/span>=<\/span>\"\/hello\"<\/span>\u3000<\/span>component<\/span>=<\/span>{<\/span>MyHello<\/span>}<\/span>\/><\/span>\r\n            <<\/span>Route<\/span> path<\/span>=<\/span>\"\/article\"<\/span> component<\/span>=<\/span>{<\/span>MyArticle<\/span>}<\/span>\/><\/span>\r\n          <\/<\/span>Switch<\/span>><\/span>\r\n        <\/<\/span>div<\/span>><\/span>\r\n     <\/<\/span>Router<\/span>><\/span>\r\n    )<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                                        \u6839\u53c2\u6570<\/h3>\n
                                                          \/\/\u30ea\u30f3\u30af<\/span>\r\n  <<\/span>Link<\/span> to<\/span>=<\/span>\"\/article\/13\"<\/span>><\/span>\u8a18\u4e8b13<\/<\/span>Link<\/span>><\/span>\r\n\r\n  \/\/\u30eb\u30fc\u30c8\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u542b\u3093\u3060\u30eb\u30fc\u30c8<\/span>\r\n  <<\/span>Route<\/span> path<\/span>=<\/span>\"\/article\/:id\"<\/span> component<\/span>=<\/span>{<\/span>MyArticle<\/span>}<\/span> \/><\/span>\r\n\r\n  \/\/\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5074\u3067\u30eb\u30fc\u30c8\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u53d7\u3051\u53d6\u308b<\/span>\r\n  \/\/this.props.match.params.\u540d\u524d\u3067\u53d7\u3051\u53d6\u308b\u3053\u3068\u304c\u53ef\u80fd<\/span>\r\n  const<\/span> id<\/span> =<\/span> this<\/span>.<\/span>props<\/span>.<\/span>match<\/span>.<\/span>params<\/span>.<\/span>id<\/span>;<\/span>\r\n\r\n<\/code><\/pre>\n
                                                        \u88dc\u5145<\/h3>\n
                                                        \u306b\u3066path\u3092\u66f8\u304b\u306a\u3044\u5834\u5408\u3001\u5168\u3066\u306eURL\u306b\u30de\u30c3\u30c1\u3059\u308b\u3001\u3068\u3044\u3046\u66f8\u304d\u65b9\u304c\u3067\u304d\u308b<\/p>\n","protected":false},"excerpt":{"rendered":"
                                                        \u7ae0\u8282\u76ee\u5f55 \u6307\u4ee4   JSX   \u5c5e\u6027   \u6761\u4ef6\u5224\u65ad\u548c\u5faa\u73af\u5904\u7406   \u72b6\u6001 […]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38601","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u53cd\u5e94\u6ce8\u89e3 - 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\/\u53cd\u5e94\u6ce8\u89e3\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u53cd\u5e94\u6ce8\u89e3\" \/>\n<meta property=\"og:description\" content=\"\u7ae0\u8282\u76ee\u5f55 \u6307\u4ee4   JSX   \u5c5e\u6027   \u6761\u4ef6\u5224\u65ad\u548c\u5faa\u73af\u5904\u7406   \u72b6\u6001 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u53cd\u5e94\u6ce8\u89e3\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-22T13:13:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T08:15:59+00:00\" \/>\n<meta name=\"author\" content=\"\u9038, \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=\"\u9038, \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\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/\",\"name\":\"\u53cd\u5e94\u6ce8\u89e3 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-12-22T13:13:20+00:00\",\"dateModified\":\"2024-04-30T08:15:59+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u53cd\u5e94\u6ce8\u89e3\"}]},{\"@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\/85c1dae56e6ea1e695c73d33c684d487\",\"name\":\"\u9038, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"caption\":\"\u9038, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u53cd\u5e94\u6ce8\u89e3 - 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\/\u53cd\u5e94\u6ce8\u89e3\/","og_locale":"zh_CN","og_type":"article","og_title":"\u53cd\u5e94\u6ce8\u89e3","og_description":"\u7ae0\u8282\u76ee\u5f55 \u6307\u4ee4   JSX   \u5c5e\u6027   \u6761\u4ef6\u5224\u65ad\u548c\u5faa\u73af\u5904\u7406   \u72b6\u6001 […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u53cd\u5e94\u6ce8\u89e3\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-12-22T13:13:20+00:00","article_modified_time":"2024-04-30T08:15:59+00:00","author":"\u9038, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u9038, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/","name":"\u53cd\u5e94\u6ce8\u89e3 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-12-22T13:13:20+00:00","dateModified":"2024-04-30T08:15:59+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u53cd\u5e94\u6ce8\u89e3"}]},{"@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\/85c1dae56e6ea1e695c73d33c684d487","name":"\u9038, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","caption":"\u9038, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%8f%8d%e5%ba%94%e6%b3%a8%e8%a7%a3\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38601","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\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38601"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38601\/revisions"}],"predecessor-version":[{"id":92947,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38601\/revisions\/92947"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}