{"id":38317,"date":"2023-11-07T06:27:21","date_gmt":"2023-09-15T07:18:39","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/"},"modified":"2024-05-04T07:54:50","modified_gmt":"2024-05-03T23:54:50","slug":"%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/","title":{"rendered":"\u3010React\u3011\u5c06\u503c\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u2026\u603b\u7ed3\uff08\u5bf9\u4e8e\u51fd\u6570\u7ec4\u4ef6\u7684\u60c5\u51b5\uff09"},"content":{"rendered":"<p>\u5728React\u4e2d\uff0c\u53ef\u4ee5\u4f7f\u7528props\u5c06\u51fd\u6570\u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\u3002<\/p>\n<p>\u7136\u800c\uff0c\u95ee\u9898\u662f\uff0c\u5f53\u5b50\u7ec4\u4ef6\u5185\u5b58\u5728\u53c2\u6570\uff0c\u5e76\u4e14\u5e0c\u671b\u5c06\u5176\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u65f6\uff0c\u5e94\u8be5\u5982\u4f55\u89e3\u51b3\u5462\uff1f\u5c3d\u7ba1\u5728\u7236\u7ec4\u4ef6\u4e2d\u4ece\u5b50\u7ec4\u4ef6\u4e2d\u4f20\u9012\u503c\u662f\u53ef\u80fd\u7684\uff0c\u4f46\u4e0eVue\u6216Angular\u4e0d\u540c\uff0cReact\u4f3c\u4e4e\u6ca1\u6709\u7c7b\u4f3c\u4e8e\u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u4f20\u9012\u503c\u7684emit\u65b9\u6cd5\u7684\u5b58\u5728\u3002<\/p>\n<p>\u6b64\u5916\uff0c\u5728\u4e4b\u524d\u7684React\u6280\u672f\u7f51\u7ad9\u4e0a\uff0c\u6211\u7ecf\u5e38\u770b\u5230\u6709\u5173\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u503c\u5230\u7236\u7ec4\u4ef6\u662f\u5426\u4e0d\u53ef\u80fd\u6216\u8005\u4e0d\u5fc5\u8981\u7684\u8bf4\u660e\u3002\u4f46\u662f\uff0c\u5f53\u6211\u7ee7\u7eed\u67e5\u770b\u56fd\u5916\u7f51\u7ad9\u65f6\uff0c\u6211\u53d1\u73b0\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528\u4ee5\u4e0b\u7684\u56de\u8c03\u51fd\u6570\u7684\u65b9\u6cd5\u6765\u5b9e\u73b0\u8c03\u7528\u5b50\u7ec4\u4ef6\u8bbe\u7f6e\u7684\u503c\uff0c\u5e76\u8fdb\u884c\u4e86\u9a8c\u8bc1\u6d4b\u8bd5\uff0c\u73b0\u5c06\u5176\u603b\u7ed3\u5982\u4e0b\u3002<\/p>\n<p>\u7531\u4e8e\u4f7f\u7528\u57fa\u4e8eReact16.8\u4e4b\u540e\u7684Hooks\u7684\u51fd\u6570\u7ec4\u4ef6\u7f16\u5199\u53d8\u5f97\u66f4\u52a0\u4e3b\u6d41\uff0c\u56e0\u6b64\u5728\u4fee\u8ba2\u7248\u6587\u7ae0\u4e2d\u6211\u5c06\u4e0d\u518d\u89e3\u91ca\u7c7b\u7ec4\u4ef6\uff08\u6211\u4f1a\u5c06\u65e7\u6587\u7ae0\u4e2d\u7684\u7c7b\u7ec4\u4ef6\u4e13\u7528\u5185\u5bb9\u6539\u5199\uff09\u3002<\/p>\n<h1>\u5982\u679c\u53ea\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u4e8b\u4ef6\u7684\u8bdd\uff1a<\/h1>\n<p>\u5982\u679c\u53ea\u6709\u4e8b\u4ef6\u65b9\u6cd5\u5b58\u5728\u4e8e\u5b50\u7ec4\u4ef6\u4e2d\uff0c\u5219\u4f7f\u7528\u56de\u8c03\u51fd\u6570\u662f\u53ef\u4ee5\u7684\u3002<\/p>\n<h2>\u5c06\u4e8b\u4ef6\u5904\u7406\u4f20\u9012<\/h2>\n<p>\u4ee5\u4e0b\u662f\u539f\u59cb\u7f51\u7ad9\uff0c\u6211\u4eec\u5c06\u4f7f\u7528\u7ec4\u4ef6\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u8ba1\u7b97\u5668\u5de5\u5177\u3002<\/p>\n<ul class=\"post-ul\">React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u9593\u306e\u5024\u306e\u53d7\u3051\u6e21\u3057<\/ul>\n<p>\u4f7f\u7528\u8fd9\u4e2a\u4f5c\u4e3a\u57fa\u7840\u6765\u5236\u4f5c\u8ba1\u7b97\u5668\u7684\u6309\u952e\u3002<\/p>\n<p>\u5f53\u952e\u5165\u6b64\u952e\u65f6\uff0c\u5c06\u663e\u793a\u5b57\u7b26\u5e76\u8fdb\u884c\u4ee5\u4e0b\u5206\u7c7b\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u6587\u5b57\u304c\u6570\u5b57\u306e\u5834\u5408\u306f\u3001\u6570\u5024\u306b\u5909\u63db\u3059\u308b\u3002\u5f15\u304d\u7d9a\u304d\u6570\u5b57\u306e\u5834\u5408\u306f\u6841\u3092\u305a\u3089\u3057\u3001\u8a08\u7b97\u8a18\u53f7\u304c\u6253\u305f\u308c\u305f\u5834\u5408\u306f\u88ab\u5e8f\u6570\u3092\u6c7a\u5b9a\u3002<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u6587\u5b57\u304c\u8a08\u7b97\u8a18\u53f7\u306e\u5834\u5408\u306f\u3001\u88ab\u5e8f\u6570\u3068\u5e8f\u6570\u3092\u78ba\u5b9a\u3057\u3001\u8a08\u7b97\u3092\u884c\u3046<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u6587\u5b57\u304c\uff1d\u306e\u5834\u5408\u306f\u5408\u8a08\u3092\u8a08\u7b97\u3059\u308b\u3002<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u6587\u5b57\u304cC\u306e\u5834\u5408\u306f\u5168\u3066\u30ea\u30bb\u30c3\u30c8\u3059\u308b\u3002<\/ul>\n<p>\u8fd9\u662f\u901a\u8fc7\u4ee5\u4e0a\u65b9\u6cd5\u521b\u5efa\u7684\u793a\u4f8b\u7a0b\u5e8f\u3002<\/p>\n<ul class=\"post-ul\">\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/ul>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Setkey<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Setkey<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Calc<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t<span class=\"kd\">const<\/span><span class=\"p\">[<\/span> <span class=\"nx\">d_lnum<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setLnum<\/span> <span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">)<\/span>\r\n\t<span class=\"kd\">const<\/span><span class=\"p\">[<\/span> <span class=\"nx\">d_cnum<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setCnum<\/span> <span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">)<\/span>\r\n\t<span class=\"kd\">const<\/span><span class=\"p\">[<\/span> <span class=\"nx\">d_sum<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setSum<\/span> <span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">)<\/span>\r\n\t<span class=\"kd\">const<\/span><span class=\"p\">[<\/span> <span class=\"nx\">d_str<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setStr<\/span> <span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">)<\/span>\r\n\t<span class=\"kd\">const<\/span><span class=\"p\">[<\/span> <span class=\"nx\">d_sign<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setSign<\/span> <span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">)<\/span>\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">vals<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\r\n\t\t\t<span class=\"p\">[[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">7<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">7<\/span><span class=\"dl\">'<\/span><span class=\"p\">],[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">8<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">8<\/span><span class=\"dl\">'<\/span><span class=\"p\">],[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">9<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">9<\/span><span class=\"dl\">'<\/span><span class=\"p\">],[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">div<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\u00f7<\/span><span class=\"dl\">'<\/span><span class=\"p\">]],<\/span>\r\n\t\t\t<span class=\"p\">[[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">4<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">4<\/span><span class=\"dl\">'<\/span><span class=\"p\">],[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">5<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">5<\/span><span class=\"dl\">'<\/span><span class=\"p\">],[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">6<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">6<\/span><span class=\"dl\">'<\/span><span class=\"p\">],[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">mul<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">\u00d7<\/span><span class=\"dl\">'<\/span><span class=\"p\">]],<\/span>\r\n\t\t\t<span class=\"p\">[[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">1<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">1<\/span><span class=\"dl\">'<\/span><span class=\"p\">],[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">2<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">2<\/span><span class=\"dl\">'<\/span><span class=\"p\">],[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">3<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">3<\/span><span class=\"dl\">'<\/span><span class=\"p\">],[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">sub<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">-<\/span><span class=\"dl\">'<\/span><span class=\"p\">]],<\/span>\r\n\t\t\t<span class=\"p\">[[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">0<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">0<\/span><span class=\"dl\">'<\/span><span class=\"p\">],[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">eq<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">=<\/span><span class=\"dl\">'<\/span><span class=\"p\">],[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">c<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">C<\/span><span class=\"dl\">'<\/span><span class=\"p\">],[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">add<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span><span class=\"dl\">'<\/span><span class=\"s1\">+<\/span><span class=\"dl\">'<\/span><span class=\"p\">]],<\/span>\r\n\t<span class=\"p\">]<\/span>\r\n\t\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">getChar<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">chr<\/span><span class=\"p\">,<\/span><span class=\"nx\">strtmp<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t\t<span class=\"kd\">let<\/span> <span class=\"nx\">lnum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">d_lnum<\/span><span class=\"err\">\u3000<\/span><span class=\"c1\">\/\/\u88ab\u5e8f\u6570<\/span>\r\n\t\t<span class=\"kd\">let<\/span> <span class=\"nx\">cnum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">d_cnum<\/span> <span class=\"c1\">\/\/\u5e8f\u6570<\/span>\r\n\t\t<span class=\"kd\">let<\/span> <span class=\"nx\">sum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">d_sum<\/span> <span class=\"c1\">\/\/\u5408\u8a08<\/span>\r\n\t\t<span class=\"kd\">let<\/span> <span class=\"nx\">sign<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">d_sign<\/span>\r\n\t\t<span class=\"kd\">let<\/span> <span class=\"nx\">str<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">d_str<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">strtmp<\/span>\r\n\t\t<span class=\"c1\">\/\/console.log(lnum,cnum,sum,str,sign)<\/span>\r\n\r\n\t\t<span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nx\">chr<\/span><span class=\"p\">.<\/span><span class=\"nf\">match<\/span><span class=\"p\">(<\/span><span class=\"sr\">\/<\/span><span class=\"se\">[<\/span><span class=\"sr\">0-9<\/span><span class=\"se\">]<\/span><span class=\"sr\">\/g<\/span><span class=\"p\">)<\/span><span class=\"o\">!==<\/span> <span class=\"kc\">null<\/span><span class=\"p\">){<\/span>\r\n\t\t\t<span class=\"kd\">let<\/span> <span class=\"nx\">num<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">parseInt<\/span><span class=\"p\">(<\/span><span class=\"nx\">chr<\/span><span class=\"p\">)<\/span>\r\n\t\t\t<span class=\"nx\">cnum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">cnum<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">10<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">num<\/span> <span class=\"c1\">\/\/\u6570\u5024\u304c\u6253\u3061\u8fbc\u307e\u308c\u308b\u3054\u3068\u306b\u6841\u3092\u305a\u3089\u3057\u3066\u3044\u304f<\/span>\r\n\t\t<span class=\"p\">}<\/span><span class=\"k\">else<\/span> <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nx\">chr<\/span><span class=\"p\">.<\/span><span class=\"nf\">match<\/span><span class=\"p\">(<\/span><span class=\"sr\">\/<\/span><span class=\"se\">(<\/span><span class=\"sr\">c|eq<\/span><span class=\"se\">)<\/span><span class=\"sr\">\/g<\/span><span class=\"p\">)<\/span> <span class=\"o\">==<\/span> <span class=\"kc\">null<\/span><span class=\"p\">){<\/span>\r\n\t\t\t<span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nx\">lnum<\/span> <span class=\"o\">!=<\/span> <span class=\"kc\">null<\/span><span class=\"p\">){<\/span>\r\n\t\t\t\t<span class=\"nx\">lnum<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">calc<\/span><span class=\"p\">(<\/span><span class=\"nx\">sign<\/span><span class=\"p\">,<\/span><span class=\"nx\">lnum<\/span><span class=\"p\">,<\/span><span class=\"nx\">cnum<\/span><span class=\"p\">)<\/span>\r\n\t\t\t<span class=\"p\">}<\/span><span class=\"k\">else<\/span><span class=\"p\">{<\/span>\r\n\t\t\t\t<span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nx\">chr<\/span> <span class=\"o\">==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">sub<\/span><span class=\"dl\">\"<\/span><span class=\"p\">){<\/span>\r\n\t\t\t\t\t<span class=\"nx\">lnum<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span>\r\n\t\t\t\t<span class=\"p\">}<\/span>\r\n\t\t\t\t<span class=\"nx\">lnum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">cnum<\/span>\r\n\t\t\t<span class=\"p\">}<\/span>\r\n\t\t\t<span class=\"nx\">sign<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">chr<\/span>\r\n\t\t\t<span class=\"nx\">cnum<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span>\r\n\t\t<span class=\"p\">}<\/span><span class=\"k\">else<\/span> <span class=\"k\">if<\/span><span class=\"p\">(<\/span> <span class=\"nx\">chr<\/span> <span class=\"o\">==<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">eq<\/span><span class=\"dl\">\"<\/span><span class=\"p\">){<\/span>\r\n\t\t\t<span class=\"nx\">lnum<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">calc<\/span><span class=\"p\">(<\/span><span class=\"nx\">sign<\/span><span class=\"p\">,<\/span><span class=\"nx\">lnum<\/span><span class=\"p\">,<\/span><span class=\"nx\">cnum<\/span><span class=\"p\">)<\/span>\r\n\t\t\t<span class=\"nx\">sum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">lnum<\/span>\r\n\t\t<span class=\"p\">}<\/span><span class=\"k\">else<\/span><span class=\"p\">{<\/span>\r\n\t\t\t<span class=\"nx\">lnum<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span>\r\n\t\t\t<span class=\"nx\">cnum<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span>\r\n\t\t\t<span class=\"nx\">sum<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">0<\/span>\r\n\t\t\t<span class=\"nx\">str<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span>\r\n\t\t<span class=\"p\">}<\/span>\r\n\t\t<span class=\"nf\">setLnum<\/span><span class=\"p\">(<\/span><span class=\"nx\">lnum<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"nf\">setCnum<\/span><span class=\"p\">(<\/span><span class=\"nx\">cnum<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"nf\">setSum<\/span><span class=\"p\">(<\/span><span class=\"nx\">sum<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"nf\">setStr<\/span><span class=\"p\">(<\/span><span class=\"nx\">str<\/span><span class=\"p\">)<\/span>\r\n\t\t<span class=\"nf\">setSign<\/span><span class=\"p\">(<\/span><span class=\"nx\">sign<\/span><span class=\"p\">)<\/span>\r\n\t<span class=\"p\">}<\/span>\r\n\t\t\r\n\t<span class=\"c1\">\/\/\u8a08\u7b97\u51e6\u7406<\/span>\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">calc<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">mode<\/span><span class=\"p\">,<\/span><span class=\"nx\">lnum<\/span><span class=\"p\">,<\/span><span class=\"nx\">cnum<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t\t<span class=\"k\">switch<\/span><span class=\"p\">(<\/span><span class=\"nx\">mode<\/span><span class=\"p\">){<\/span>\r\n\t\t\t<span class=\"k\">case<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">add<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"nx\">lnum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">cnum<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">lnum<\/span>\r\n\t\t\t<span class=\"k\">break<\/span><span class=\"p\">;<\/span>\r\n\t\t\t<span class=\"k\">case<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">sub<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"nx\">lnum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">lnum<\/span> <span class=\"o\">-<\/span> <span class=\"nx\">cnum<\/span>\r\n\t\t\t<span class=\"k\">break<\/span><span class=\"p\">;<\/span>\r\n\t\t\t<span class=\"k\">case<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">mul<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"nx\">lnum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">lnum<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">cnum<\/span>\r\n\t\t\t<span class=\"k\">break<\/span><span class=\"p\">;<\/span>\r\n\t\t\t<span class=\"k\">case<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">div<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"nx\">lnum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">lnum<\/span> <span class=\"o\">\/<\/span> <span class=\"nx\">cnum<\/span>\r\n\t\t\t<span class=\"k\">break<\/span><span class=\"p\">;<\/span>\r\n\t\t<span class=\"p\">}<\/span>\r\n\t\t<span class=\"k\">return<\/span> <span class=\"nx\">lnum<\/span>\r\n\t<span class=\"p\">}<\/span>\r\n\t\r\n\t<span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n\t\t\t<span class=\"o\">&lt;&gt;<\/span>\r\n\t\t\t<span class=\"p\">{<\/span>\r\n\t\t\t\t<span class=\"nx\">vals<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">val<\/span><span class=\"p\">,<\/span><span class=\"nx\">key<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t\t\t\t\t<span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">key<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t<span class=\"p\">{<\/span>\r\n\t\t\t\t\t\t\t<span class=\"nx\">val<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">v<\/span><span class=\"p\">,<\/span><span class=\"nx\">i<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t\t\t\t\t\t\t\t<span class=\"k\">return<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Setkey<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">i<\/span><span class=\"p\">}<\/span> <span class=\"nx\">val<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">v<\/span><span class=\"p\">[<\/span><span class=\"mi\">1<\/span><span class=\"p\">]}<\/span> <span class=\"nx\">getChar<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span><span class=\"nf\">getChar<\/span><span class=\"p\">(<\/span><span class=\"nx\">v<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">],<\/span><span class=\"nx\">v<\/span><span class=\"p\">[<\/span><span class=\"mi\">1<\/span><span class=\"p\">])}<\/span> <span class=\"p\">}<\/span><span class=\"sr\">\/&gt;<\/span><span class=\"err\">)\r\n<\/span>\t\t\t\t\t\t\t<span class=\"p\">})<\/span>\r\n\t\t\t\t\t\t<span class=\"p\">}<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"p\">)<\/span>\r\n\t\t\t\t<span class=\"p\">})<\/span>\r\n\t\t\t<span class=\"p\">}<\/span>\r\n\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"na\">\u6253\u3061\u8fbc\u3093\u3060\u6587\u5b57<\/span><span class=\"p\">:{<\/span><span class=\"nx\">d_str<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"na\">\u5408\u8a08<\/span><span class=\"p\">:{<\/span><span class=\"nx\">d_sum<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/p<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>\t<span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Calc<\/span>\r\n<\/code><\/pre>\n<ul class=\"post-ul\">\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/ul>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Setkey<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t<span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">getChar<\/span><span class=\"p\">,<\/span><span class=\"nx\">val<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">props<\/span>\r\n\t<span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">square<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span><span class=\"nf\">getChar<\/span><span class=\"p\">()}}<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t<span class=\"p\">{<\/span><span class=\"nx\">val<\/span><span class=\"p\">}<\/span>\r\n\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\r\n<\/span>\t<span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Setkey<\/span>\r\n<\/code><\/pre>\n<p>\u8fd9\u4e2a\u529f\u80fd\u6700\u4f4e\u9650\u5ea6\u4e0a\u53ef\u4ee5\u4f5c\u4e3a\u4e00\u4e2a\u8ba1\u7b97\u5668\u4f7f\u7528\uff0c\u4f46\u63a5\u4e0b\u6765\u6211\u4eec\u8981\u8fdb\u5165\u6b63\u9898\u3002\u70b9\u51fb\u4e8b\u4ef6\u548c\u7531\u6b64\u89e6\u53d1\u7684getChar\u65b9\u6cd5\u5b58\u5728\u4e8e\u5b50\u7ec4\u4ef6\u751f\u6210\u7684JSX\u5185\uff0c\u4f46\u5b50\u7ec4\u4ef6\u4e2d\u6ca1\u6709\u63d0\u4f9b\u503c\u3002<\/p>\n<p>\u7136\u800c\uff0c\u7531\u4e8e\u53ef\u4ee5\u4f7f\u7528\u56de\u8c03\u51fd\u6570\u6765\u4f20\u9012\u4e8b\u4ef6\u5904\u7406\uff0c\u56e0\u6b64\u5728getChar\u65b9\u6cd5\u88ab\u89e6\u53d1\u65f6\uff0c\u7236\u7ec4\u4ef6\u7684\u540c\u6b65\u65b9\u6cd5getChar\u4e2d\u7684\u53c2\u6570v[0]\u548cv[1]\u5c06\u88ab\u4f20\u9012\u7ed9getChar\u65b9\u6cd5\uff0c\u4ece\u800c\u8fdb\u884c\u8ba1\u7b97\u5904\u7406\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"k\">return<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">PushKey<\/span> <span class=\"nx\">val<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">v<\/span><span class=\"p\">[<\/span><span class=\"mi\">1<\/span><span class=\"p\">]}<\/span> <span class=\"nx\">getChar<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span><span class=\"nf\">getChar<\/span><span class=\"p\">(<\/span><span class=\"nx\">v<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">],<\/span><span class=\"nx\">v<\/span><span class=\"p\">[<\/span><span class=\"mi\">1<\/span><span class=\"p\">])}<\/span> <span class=\"p\">}<\/span><span class=\"sr\">\/&gt;<\/span><span class=\"err\">)\r\n<\/span><\/code><\/pre>\n<p>\u5728\u8fd9\u91cc\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u7236\u7ec4\u4ef6\u4e2d\u7684\u8868\u8fbe\u5f0f\u5de6\u4fa7\u548c\u8868\u8fbe\u5f0f\u53f3\u4fa7\u7684&#8221;getChar&#8221;\u662f\u4e0d\u540c\u7684\uff0c\u8868\u8fbe\u5f0f\u5de6\u4fa7\u662f\u7528\u4e8e\u540c\u6b65\u7684\u56de\u8c03\u51fd\u6570\u3002<\/p>\n<p>\u56e0\u6b64\uff0c\u6562\u8bd5\u7740\u5c06\u5176\u533a\u5206\u5f00\u6765\uff0c\u73b0\u5728\uff0c\u5728\u56fd\u5916\u7f51\u7ad9\u4e2d\uff0c\u4e3a\u4e86\u66f4\u5bb9\u6613\u533a\u5206\uff0c\u901a\u5e38\u5c06\u65b9\u6cd5\u90e8\u5206\u79f0\u4e3a&#8221;hoge&#8221;\uff0c\u56de\u8c03\u51fd\u6570\u90e8\u5206\u79f0\u4e3a&#8221;hogeState&#8221;\u3002<\/p>\n<pre class=\"post-pre\"><code>    <span class=\"p\">{<\/span><span class=\"cm\">\/*\u5de6\u5074\u306f\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3001\u53f3\u5074\u306f\u51e6\u7406\u7528\u30e1\u30bd\u30c3\u30c9*\/<\/span><span class=\"p\">}<\/span>\r\n    <span class=\"k\">return<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">PushKey<\/span> <span class=\"nx\">val<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">v<\/span><span class=\"p\">[<\/span><span class=\"mi\">1<\/span><span class=\"p\">]}<\/span> <span class=\"nx\">getCharState<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span><span class=\"nf\">getChar<\/span><span class=\"p\">(<\/span><span class=\"nx\">v<\/span><span class=\"p\">[<\/span><span class=\"mi\">0<\/span><span class=\"p\">],<\/span><span class=\"nx\">v<\/span><span class=\"p\">[<\/span><span class=\"mi\">1<\/span><span class=\"p\">])}<\/span> <span class=\"p\">}<\/span><span class=\"sr\">\/&gt;<\/span><span class=\"err\">)\r\n<\/span><\/code><\/pre>\n<pre class=\"post-pre\"><code>        <span class=\"p\">{<\/span><span class=\"cm\">\/*\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u7f6e\u304b\u308c\u305f\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570*\/<\/span><span class=\"p\">}<\/span>\r\n\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">square<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span><span class=\"nf\">getCharState<\/span><span class=\"p\">()}}<\/span><span class=\"o\">&gt;<\/span>\r\n<\/code><\/pre>\n<h1>\u5982\u679c\u8981\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u4e8b\u4ef6\u548c\u503c\uff0c\u7528\u4e2d\u6587\u539f\u751f\u65b9\u5f0f\u89e3\u91ca\u7684\u8bdd, \u53ef\u4ee5\u8bf4\u662f\uff1a\u201c\u5f53\u9700\u8981\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u4e8b\u4ef6\u548c\u503c\u65f6\u201d\u3002<\/h1>\n<p>\u6839\u636e\u7b2c1\u7ae0\u7684\u5185\u5bb9\uff0c\u6211\u4eec\u5c06\u8fdb\u5165\u5173\u4e8e\u5982\u4f55\u5c06\u5b50\u7ec4\u4ef6\u7684\u503c\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u7684\u5904\u7406\u8fc7\u7a0b\u7684\u8bf4\u660e\u3002\u9996\u5148\uff0c\u6211\u4eec\u4f7f\u7528\u4e8b\u4ef6\u89e6\u53d1\u6765\u4f20\u9012\u503c\uff0c\u8fd9\u6837\u6211\u4eec\u53ef\u4ee5\u4f20\u9012\u4efb\u610f\u7684\u952e\u6216\u7d22\u5f15\u3002<\/p>\n<p>\u8fd9\u6b21\u6211\u4eec\u5c06\u4f7f\u7528Typescript\u6765\u89e3\u91catsx\u6587\u4ef6\uff0c\u4f46\u57fa\u672c\u90e8\u5206\u6ca1\u6709\u53d8\u5316\u3002<\/p>\n<h2>\u5c06\u5b50\u7ec4\u4ef6\u7684\u503c\u8c03\u7528\u5230\u7236\u7ec4\u4ef6\u4e2d<\/h2>\n<p>\u8fd9\u4e2a\u7a0b\u5e8f\u662f\u5c06\u4f7f\u7528Typescript\u6784\u5efa\u7684\u7b80\u6d01\u7684ToDo\u7cfb\u7edf\uff08\u6e90\u4ee3\u7801\u662fVue3\uff09\u6539\u9020\u6210React\uff0c\u4ee5\u4fbf\u53ef\u4ee5\u5207\u6362\u72b6\u6001\u3002\u5728\u66f4\u6539\u72b6\u6001\u65f6\uff0c\u5b83\u4f1a\u8c03\u7528\u5b50\u7ec4\u4ef6\u4e0a\u8bbe\u7f6e\u7684\u7d22\u5f15\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Todo<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/Todo<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">AddTodo<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/AddTodo<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/Styles.css<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"c1\">\/\/\u53ef\u8aad\u6027\u3092\u4e0a\u3052\u308b\u305f\u3081\u306bmodel\u306e\u5c0e\u5165<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ToDo<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/todo.model<\/span><span class=\"dl\">'<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">VFC<\/span> <span class=\"o\">=<\/span><span class=\"p\">()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t<span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">todos<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setTodos<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">ToDo<\/span><span class=\"p\">[]<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">([]);<\/span>\r\n\t<span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">title<\/span><span class=\"p\">,<\/span><span class=\"nx\">setValue<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">todoAdd<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span><span class=\"na\">state<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t\t<span class=\"nf\">setTodos<\/span><span class=\"p\">(<\/span><span class=\"nx\">prevTodos<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">[<\/span>\r\n\t\t\t<span class=\"p\">...<\/span><span class=\"nx\">prevTodos<\/span><span class=\"p\">,<\/span>\r\n\t\t\t<span class=\"p\">{<\/span><span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Math<\/span><span class=\"p\">.<\/span><span class=\"nf\">random<\/span><span class=\"p\">().<\/span><span class=\"nf\">toString<\/span><span class=\"p\">(),<\/span> <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"nx\">text<\/span><span class=\"p\">,<\/span><span class=\"na\">state<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\u672a\u4f5c\u696d<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span>\r\n\t\t<span class=\"p\">])<\/span>\r\n\t<span class=\"p\">}<\/span>\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">toggle<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">i<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">,<\/span><span class=\"na\">slist<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t\t\t<span class=\"kd\">const<\/span> <span class=\"nx\">stat<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{...<\/span><span class=\"nx\">slist<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]}<\/span>\r\n            <span class=\"c1\">\/\/\u30b9\u30c6\u30fc\u30bf\u30b9\u5207\u308a\u66ff\u3048<\/span>\r\n\t\t\t<span class=\"nx\">stat<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">stat<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\u672a\u4f5c\u696d<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\u4f5c\u696d\u4e2d<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\u4f5c\u696d\u5b8c\u4e86<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n\t\t\t<span class=\"nx\">slist<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">stat<\/span>\r\n\t\t\t<span class=\"nf\">setTodos<\/span><span class=\"p\">([...<\/span><span class=\"nx\">slist<\/span><span class=\"p\">])<\/span>\r\n\t<span class=\"p\">}<\/span>\r\n\t\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">deleteList<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">i<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t\t<span class=\"nf\">setTodos<\/span><span class=\"p\">(<\/span><span class=\"nx\">todos<\/span><span class=\"p\">.<\/span><span class=\"nf\">filter<\/span><span class=\"p\">((<\/span><span class=\"nx\">_<\/span><span class=\"p\">,<\/span><span class=\"nx\">idx<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span> <span class=\"nx\">idx<\/span> <span class=\"o\">!==<\/span> <span class=\"nx\">i<\/span><span class=\"p\">))<\/span>\r\n\t<span class=\"p\">}<\/span>\r\n\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">nav<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">React<\/span><span class=\"o\">-<\/span><span class=\"nx\">typescript<\/span><span class=\"o\">-<\/span><span class=\"nx\">TODO<\/span> <span class=\"nx\">\u30c6\u30b9\u30c8<\/span> <span class=\"nx\">React18<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t<span class=\"p\">{<\/span> <span class=\"nx\">todos<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"p\">}<\/span><span class=\"nx\">\u4ef6\u3092\u8868\u793a\u4e2d<\/span>\r\n\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">table<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">thead<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">tr<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">th<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">id<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">ID<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/th<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">th<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">comment<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">\u30b3\u30e1\u30f3\u30c8<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/th<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">th<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">state<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">\u72b6\u614b<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/th<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">th<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">button<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;-&lt;<\/span><span class=\"sr\">\/th<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/tr<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/thead<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">tbody<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">Todo<\/span> \r\n\t\t\t\t\t\t<span class=\"nx\">items<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">todos<\/span><span class=\"p\">}<\/span>\r\n\t\t\t\t\t\t<span class=\"nx\">toggleState<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"na\">index<\/span><span class=\"p\">:<\/span><span class=\"kr\">any<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"nf\">toggle<\/span><span class=\"p\">(<\/span><span class=\"nx\">index<\/span><span class=\"p\">,<\/span><span class=\"nx\">todos<\/span><span class=\"p\">)}<\/span>\r\n\t\t\t\t\t\t<span class=\"nx\">delState<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"na\">index<\/span><span class=\"p\">:<\/span><span class=\"kr\">any<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"nf\">deleteList<\/span><span class=\"p\">(<\/span><span class=\"nx\">index<\/span><span class=\"p\">)}<\/span>\r\n\t\t\t\t\t<span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/tbody<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/table<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">\u65b0\u3057\u3044\u4f5c\u696d\u306e\u8ffd\u52a0<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">AddTodo<\/span> <span class=\"nx\">todoAdded<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">todoAdd<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/&gt;{\/<\/span><span class=\"o\">*<\/span><span class=\"nx\">\u30d5\u30a9\u30fc\u30e0\u5236\u5fa1<\/span><span class=\"o\">*<\/span><span class=\"sr\">\/<\/span><span class=\"err\">}\r\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\r\n<\/span>  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">App<\/span><span class=\"p\">;<\/span>\r\n\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"c1\">\/\/\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u8a2d\u5b9a<\/span>\r\n<span class=\"kr\">interface<\/span> <span class=\"nx\">TodoProps<\/span><span class=\"p\">{<\/span>\r\n\t<span class=\"nl\">items<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n\t\t<span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\r\n\t\t<span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\r\n\t\t<span class=\"na\">state<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span>\r\n\t<span class=\"p\">}[],<\/span>\r\n\t<span class=\"nx\">toggleState<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">,<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Todo<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">FC<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">TodoProps<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">props<\/span> <span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t<span class=\"k\">return<\/span><span class=\"p\">(<\/span>\r\n\t\t<span class=\"o\">&lt;&gt;<\/span>\r\n\t\t\t<span class=\"p\">{<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">list<\/span><span class=\"p\">,<\/span><span class=\"nx\">idx<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span><span class=\"p\">(<\/span>\r\n\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">tr<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">idx<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">list<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">list<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">state<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span><span class=\"o\">=&gt;<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nf\">toggleState<\/span><span class=\"p\">(<\/span><span class=\"nx\">idx<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t\t<span class=\"p\">{<\/span><span class=\"nx\">list<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">}<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">button<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span><span class=\"o\">=&gt;<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nf\">delState<\/span><span class=\"p\">(<\/span><span class=\"nx\">idx<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t<span class=\"nx\">\u524a\u9664<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/tr<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t<span class=\"p\">))}<\/span>\r\n\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>\t<span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Todo<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<h2>\u4f7f\u7528\u56de\u8c03\u51fd\u6570\uff0c\u4ece\u5185\u8054\u51fd\u6570\u7684\u53c2\u6570\u4e2d\u4f20\u9012\u503c\u3002<\/h2>\n<p>\u672c\u9898\u6d89\u53ca\u4ee5\u4e0b\u90e8\u5206\u3002toggleState\u65b9\u6cd5\u7684\u53c2\u6570\u662f\u901a\u8fc7map\u65b9\u6cd5\u4f20\u9012\u7ed9\u6570\u7ec4\u7684\u7d22\u5f15\uff0c\u5e76\u5c06\u8be5\u7d22\u5f15\u4f5c\u4e3a\u53c2\u6570\u4f20\u9012\u7ed9\u4f4d\u4e8eTodo.tsx\u6587\u4ef6\u4e2d\u7684\u56de\u8c03\u51fd\u6570toggleState\u7684\u5185\u8054\u51fd\u6570\u3002\u7136\u540e\uff0c\u5c06\u8be5\u53c2\u6570\u5206\u914d\u7ed9\u5185\u8054\u51fd\u6570\u5185\u7684toggle\u65b9\u6cd5\u7684\u53c2\u6570\uff0c\u901a\u8fc7\u6b64\u65b9\u6cd5\u5728\u65b9\u6cd5\u5185\u8fdb\u884c\u5904\u7406\uff0c\u5e76\u8fdb\u884c\u540c\u6b65\u64cd\u4f5c\u6d41\u7a0b\u3002<\/p>\n<pre class=\"post-pre\"><code>\t\t<span class=\"o\">&lt;&gt;<\/span>\r\n\t\t\t<span class=\"p\">{<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">list<\/span><span class=\"p\">,<\/span><span class=\"nx\">idx<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span><span class=\"p\">(<\/span>\r\n\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">tr<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">idx<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">list<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">list<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">state<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n                        <span class=\"p\">{<\/span><span class=\"cm\">\/*\u5f15\u6570idx\u306f\u9078\u629e\u3057\u305f\u30ea\u30b9\u30c8\u306e\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u304c\u683c\u7d0d\u3055\u308c\u308b*\/<\/span><span class=\"p\">}<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span><span class=\"o\">=&gt;<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nf\">toggleState<\/span><span class=\"p\">(<\/span><span class=\"nx\">idx<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t\t<span class=\"p\">{<\/span><span class=\"nx\">list<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">}<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">button<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t<span class=\"nx\">\u524a\u9664<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/tr<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t<span class=\"p\">))}<\/span>\r\n\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span><\/code><\/pre>\n<pre class=\"post-pre\"><code>\t<span class=\"kd\">const<\/span> <span class=\"nx\">toggle<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">i<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">,<\/span><span class=\"nx\">slist<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t\t\t<span class=\"kd\">const<\/span> <span class=\"nx\">stat<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{...<\/span><span class=\"nx\">slist<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]}<\/span> <span class=\"c1\">\/\/\u4fee\u6b63\u3057\u305f\u3044\u30ea\u30b9\u30c8\u3092\u62bd\u51fa<\/span>\r\n\t\t\t<span class=\"nx\">stat<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">stat<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\u672a\u4f5c\u696d<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\u4f5c\u696d\u4e2d<\/span><span class=\"dl\">'<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">\u4f5c\u696d\u5b8c\u4e86<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/\u30b9\u30c6\u30fc\u30bf\u30b9\u5207\u308a\u66ff\u3048<\/span>\r\n\t\t\t<span class=\"nx\">slist<\/span><span class=\"p\">[<\/span><span class=\"nx\">i<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">stat<\/span> <span class=\"c1\">\/\/\u4ee3\u5165<\/span>\r\n\t\t\t<span class=\"nf\">setTodos<\/span><span class=\"p\">([...<\/span><span class=\"nx\">slist<\/span><span class=\"p\">])<\/span> <span class=\"c1\">\/\/\u30d5\u30c3\u30af\u3067\u53cd\u6620\u3001\u5206\u5272\u4ee3\u5165\u306b\u3057\u306a\u3044\u3068\u53cd\u6620\u3055\u308c\u306a\u3044\u3002<\/span>\r\n\t<span class=\"p\">}<\/span>\r\n\r\n    <span class=\"p\">{<\/span><span class=\"cm\">\/*\u4e2d\u7565*\/<\/span><span class=\"p\">}<\/span>\r\n    <span class=\"p\">{<\/span><span class=\"cm\">\/*\u5f15\u6570idx\u304c\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u547c\u3073\u51fa\u3057\u305f\u5bfe\u8c61\u30ea\u30b9\u30c8\u306e\u30a4\u30f3\u30c7\u30c3\u30af\u30b9*\/<\/span><span class=\"p\">}<\/span>\r\n\t<span class=\"o\">&lt;<\/span><span class=\"nx\">Todo<\/span> <span class=\"nx\">items<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">todos<\/span><span class=\"p\">}<\/span> <span class=\"nx\">toggleState<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"na\">idx<\/span><span class=\"p\">:<\/span><span class=\"kr\">any<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"nf\">toggle<\/span><span class=\"p\">(<\/span><span class=\"nx\">idx<\/span><span class=\"p\">,<\/span><span class=\"nx\">todos<\/span><span class=\"p\">)}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span><\/code><\/pre>\n<p>\u4ee5\u8fd9\u79cd\u65b9\u5f0f\uff0c\u60a8\u53ef\u4ee5\u5c06\u5b50\u7ec4\u4ef6\u7684\u503c\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u5e76\u8fdb\u884c\u540c\u6b65\u3002\u5bf9\u4e8e\u5220\u9664\u64cd\u4f5c\uff0c\u53ea\u9700\u8981\u83b7\u53d6\u7d22\u5f15\u5373\u53ef\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33b837434c4406c66417\/36-0.jpeg\" alt=\"react.jpg\" \/><\/div>\n<p>\u6211\u5011\u5f9e\u5b50\u7d44\u4ef6\u4e2d\u547c\u53eb\u4e86\u9663\u5217Todos\u7684\u7d22\u5f15\u4f86\u6539\u8b8a\u6240\u9078\u5217\u8868\u7684\u72c0\u614b\u3002<\/p>\n<h1>\u5982\u679c\u53ea\u9700\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u503c\uff0c\u90a3\u4e48&#8230;<\/h1>\n<p>\u5982\u679c\u5728\u4e0d\u89e6\u53d1\u4e8b\u4ef6\u7684\u60c5\u51b5\u4e0b\uff0c\u53ea\u60f3\u5c06\u5b50\u7ec4\u4ef6\u7684\u503c\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u901a\u8fc7\u5728\u5b50\u7ec4\u4ef6\u4e2d\u4f7f\u7528useEffect\u94a9\u5b50\u6765\u5b9e\u73b0\u3002\u5728\u8fd9\u4e2a\u94a9\u5b50\u5185\u90e8\u521b\u5efa\u4e00\u4e2a\u7528\u4e8e\u4f20\u9012\u7684\u56de\u8c03\u51fd\u6570\uff0c\u7136\u540e\u50cf\u4ee5\u524d\u4e00\u6837\u5c06\u503c\u548c\u53c2\u6570\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u3002\u7136\u540e\uff0c\u5728\u7236\u7ec4\u4ef6\u4e2d\u4f7f\u7528useState\u94a9\u5b50\u8fdb\u884c\u540c\u6b65\uff08\u76f4\u63a5\u5728\u5185\u8054\u51fd\u6570\u4e2d\u4f7f\u7528\u540c\u6b65\u65b9\u6cd5setHoge\u6548\u7387\u66f4\u9ad8\uff09\u3002<\/p>\n<p>\u6211\u5c1d\u8bd5\u6539\u9020\u4e86\u5148\u524d\u7684Todo\u5de5\u5177\u6807\u9898\uff0c\u4f7f\u5176\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,{<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Todo<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/Todo<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">AddTodo<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/components\/AddTodo<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/Styles.css<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"c1\">\/\/\u53ef\u8aad\u6027\u3092\u4e0a\u3052\u308b\u305f\u3081\u306bmodel\u306e\u5c0e\u5165<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ToDo<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/todo.model<\/span><span class=\"dl\">'<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">VFC<\/span> <span class=\"o\">=<\/span><span class=\"p\">()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n  <span class=\"p\">{<\/span><span class=\"cm\">\/*\u4e2d\u7565*\/<\/span><span class=\"p\">}<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">title<\/span><span class=\"p\">,<\/span><span class=\"nx\">setTitle<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\r\n  <span class=\"p\">{<\/span><span class=\"cm\">\/*\u4e2d\u7565*\/<\/span><span class=\"p\">}<\/span>\r\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">nav<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n        <span class=\"p\">{<\/span><span class=\"cm\">\/*\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u8a2d\u5b9a\u3057\u305f\u30bf\u30a4\u30c8\u30eb\u304c\u8868\u793a\u3055\u308c\u308b*\/<\/span><span class=\"p\">}<\/span>\r\n\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t<span class=\"p\">{<\/span><span class=\"cm\">\/*\u4e2d\u7565*\/<\/span><span class=\"p\">}<\/span>\r\n        <span class=\"p\">{<\/span><span class=\"cm\">\/*setTitleState\u306e*\/<\/span><span class=\"p\">}<\/span>\r\n\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">Todo<\/span> \r\n\t\t\t<span class=\"nx\">items<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">todos<\/span><span class=\"p\">}<\/span>\r\n\t\t\t<span class=\"nx\">toggleState<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"na\">index<\/span><span class=\"p\">:<\/span><span class=\"kr\">any<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"nf\">toggle<\/span><span class=\"p\">(<\/span><span class=\"nx\">index<\/span><span class=\"p\">,<\/span><span class=\"nx\">todos<\/span><span class=\"p\">)}<\/span>\r\n\t\t\t<span class=\"nx\">delState<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"na\">index<\/span><span class=\"p\">:<\/span><span class=\"kr\">any<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"nf\">deleteList<\/span><span class=\"p\">(<\/span><span class=\"nx\">index<\/span><span class=\"p\">)}<\/span>\r\n\t\t\t<span class=\"nx\">setTitleState<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"na\">val<\/span><span class=\"p\">:<\/span><span class=\"kr\">any<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"nf\">setTitle<\/span><span class=\"p\">(<\/span><span class=\"nx\">val<\/span><span class=\"p\">)}<\/span> \r\n\t\t<span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">App<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,{<\/span> <span class=\"nx\">useEffect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"c1\">\/\/\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u8a2d\u5b9a<\/span>\r\n<span class=\"kr\">interface<\/span> <span class=\"nx\">TodoProps<\/span><span class=\"p\">{<\/span>\r\n\t<span class=\"nl\">items<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n\t\t<span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\r\n\t\t<span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span>\r\n\t\t<span class=\"na\">state<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span>\r\n\t<span class=\"p\">}[],<\/span>\r\n\t<span class=\"nx\">toggleState<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">,<\/span>\r\n\t<span class=\"nx\">setTitleState<\/span><span class=\"p\">:<\/span><span class=\"kr\">any<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u8a2d\u5b9a\u3057\u3066\u304a\u304f<\/span>\r\n\t<span class=\"nx\">delState<\/span><span class=\"p\">:<\/span><span class=\"kr\">any<\/span><span class=\"p\">,<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Todo<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">FC<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">TodoProps<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">props<\/span> <span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t<span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">title<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">React-typescript-TODO \u30c6\u30b9\u30c8 React18<\/span><span class=\"dl\">'<\/span> <span class=\"c1\">\/\/\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u53cd\u6620\u3055\u305b\u308b\u30bf\u30a4\u30c8\u30eb<\/span>\r\n\t<span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nf\">setTitleState<\/span><span class=\"p\">(<\/span><span class=\"nx\">title<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/\u53d7\u3051\u6e21\u3057\u7528\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570<\/span>\r\n<span class=\"p\">},[<\/span><span class=\"nx\">props<\/span><span class=\"p\">])<\/span>\r\n\t<span class=\"k\">return<\/span><span class=\"p\">(<\/span>\r\n\t\t<span class=\"o\">&lt;&gt;<\/span>\r\n\t\t\t<span class=\"p\">{<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">items<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">list<\/span><span class=\"p\">,<\/span><span class=\"nx\">idx<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span><span class=\"p\">(<\/span>\r\n\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">tr<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">idx<\/span><span class=\"p\">}<\/span> <span class=\"o\">&gt;<\/span>\r\n\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">list<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">list<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">state<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span><span class=\"o\">=&gt;<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nf\">toggleState<\/span><span class=\"p\">(<\/span><span class=\"nx\">idx<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t\t<span class=\"p\">{<\/span><span class=\"nx\">list<\/span><span class=\"p\">.<\/span><span class=\"nx\">state<\/span><span class=\"p\">}<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">td<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">button<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span><span class=\"o\">=&gt;<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nf\">delState<\/span><span class=\"p\">(<\/span><span class=\"nx\">idx<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t<span class=\"nx\">\u524a\u9664<\/span>\r\n\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/td<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/tr<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t<span class=\"p\">))}<\/span>\r\n\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>\t<span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Todo<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<h1>\u5f53\u5b50\u7ec4\u4ef6\u9700\u8981\u5c06\u4e8b\u4ef6\u548c\u503c\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\uff0c\u5e76\u518d\u6b21\u53cd\u6620\u5230\u5b50\u7ec4\u4ef6\u4e0a\u7684\u60c5\u51b5\u4e0b<\/h1>\n<p>\u867d\u7136\u6709\u70b9\u96be\u7406\u89e3\uff0c\u4f46\u662f\u8fd9\u79cd\u60c5\u51b5\u4e0b\u662f\u6307\u5b50\u7ec4\u4ef6\u2192\u7236\u7ec4\u4ef6\u2192\u5b50\u7ec4\u4ef6\u3002 \u5b50\u7ec4\u4ef6\u4e2d\u5df2\u7ecf\u51c6\u5907\u4e86\u76f8\u540c\u7684\u53d8\u91cf\u3002<\/p>\n<p>\u7236\u6bcd\u5fc5\u987b\u5411\u5b50\u5973\u4f20\u9012\u4ef7\u503c\u89c2\uff0c\u6240\u4ee5\u6211\u4f1a\u51c6\u5907\u597d\u5c06datastate={data}\u4f20\u9012\u7ed9\u4ed6\u4eec\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,{<\/span><span class=\"nx\">useState<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Test2<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/Test2<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Test<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">data<\/span><span class=\"p\">,<\/span><span class=\"nx\">setData<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"kd\">function<\/span> <span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"nx\">idx<\/span><span class=\"p\">){<\/span>\r\n    <span class=\"kd\">const<\/span> <span class=\"nx\">add<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">idx<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">2<\/span>\r\n    <span class=\"nf\">setData<\/span><span class=\"p\">(<\/span><span class=\"nx\">add<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  <span class=\"k\">return<\/span><span class=\"p\">(<\/span>\r\n    <span class=\"o\">&lt;&gt;<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">Test2<\/span> <span class=\"nx\">fromChildState<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">idx<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">(<\/span><span class=\"nf\">bind<\/span><span class=\"p\">(<\/span><span class=\"nx\">idx<\/span><span class=\"p\">))}<\/span> <span class=\"nx\">datastate<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">data<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>  <span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Test<\/span>\r\n<\/code><\/pre>\n<p>\u5bf9\u4e8e\u5b50\u7ec4\u4ef6\u6765\u8bf4\uff0c\u9700\u8981\u4e0e\u4f20\u9012\u7684props.datastate\u8fdb\u884c\u540c\u6b65\uff0c\u56e0\u6b64\u6211\u4eec\u5728\u8fd9\u91cc\u4f7f\u7528setData2\u548cuseState\u6765\u8fdb\u884c\u63a7\u5236\u3002\u7136\u540e\uff0c\u4f7f\u7528useEffect\u94a9\u5b50\uff0c\u53ea\u6709\u5f53props.datastate\u4e0d\u4e3anull\u65f6\uff0c\u624d\u8fdb\u884c\u540c\u6b65\u64cd\u4f5c\uff0c\u8fd9\u6837\u5b50\u7ec4\u4ef6\u5c31\u53ef\u4ee5\u663e\u793a\u521d\u59cb\u503c\u548c\u901a\u8fc7\u7236\u7ec4\u4ef6\u540c\u6b65\u5904\u7406\u7684\u503c\uff08\u8fd8\u53ef\u4ee5\u4f7f\u7528\u5c06\u7236\u7ec4\u4ef6\u7684setData\u4f20\u9012\u7ed9props\u7684\u65b9\u6cd5\uff09\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">React<\/span><span class=\"p\">,{<\/span><span class=\"nx\">useState<\/span><span class=\"p\">,<\/span><span class=\"nx\">useRef<\/span><span class=\"p\">,<\/span><span class=\"nx\">useEffect<\/span><span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">react<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">Test2<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span><span class=\"nx\">datastate<\/span><span class=\"p\">,<\/span><span class=\"nx\">fromChildState<\/span><span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">props<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">ini<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">2<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">data2<\/span><span class=\"p\">,<\/span><span class=\"nx\">setData2<\/span> <span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"nx\">ini<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n    <span class=\"k\">if<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">datastate<\/span> <span class=\"o\">!=<\/span> <span class=\"kc\">null<\/span><span class=\"p\">){<\/span>\r\n      <span class=\"nf\">setData2<\/span><span class=\"p\">(<\/span><span class=\"nx\">props<\/span><span class=\"p\">.<\/span><span class=\"nx\">datastate<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"p\">}<\/span>\r\n  <span class=\"p\">},[<\/span><span class=\"nx\">props<\/span><span class=\"p\">])<\/span>\r\n  <span class=\"k\">return<\/span><span class=\"p\">(<\/span>\r\n    <span class=\"o\">&lt;&gt;<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">button<\/span> <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span><span class=\"o\">=&gt;<\/span><span class=\"nf\">fromChildState<\/span><span class=\"p\">(<\/span><span class=\"nx\">data2<\/span><span class=\"p\">)}<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">\u3066\u3059\u3068<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/button<\/span><span class=\"err\">&gt;\r\n<\/span>      <span class=\"p\">{<\/span> <span class=\"nx\">data2<\/span> <span class=\"p\">}<\/span>\r\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>  <span class=\"p\">)<\/span>\r\n<span class=\"p\">}<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Test2<\/span>\r\n<\/code><\/pre>\n<h1>\u4f7f\u7528\u7c7b\u7ec4\u4ef6\u7684\u60c5\u51b5\u4e0b<\/h1>\n<p>\u7531\u4e8e\u6211\u4eec\u5c06\u65e7\u6587\u7ae0\u6574\u7406\u6210\u4e86\u4e13\u95e8\u7528\u4e8e\u8bfe\u7a0b\u7ec4\u4ef6\u7684\u6c47\u603b\u7f51\u7ad9\uff0c\u8bf7\u53c2\u8003\u8be5\u7f51\u7ad9\u3002<\/p>\n<p>\u3010React\u3011\u4ece\u5b50\u7ec4\u4ef6\u4f20\u503c\u7ed9\u7236\u7ec4\u4ef6\u7684\u6574\u7406\uff08\u7c7b\u7ec4\u4ef6\u573a\u666f\uff09<\/p>\n<p>Note: Please note that due to the limitations of the system, the Chinese translation here might not include the specific characters used in the original Japanese text. However, the meaning and context have been preserved in the translation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5728React\u4e2d\uff0c\u53ef\u4ee5\u4f7f\u7528props\u5c06\u51fd\u6570\u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\u3002 \u7136\u800c\uff0c\u95ee\u9898\u662f\uff0c\u5f53\u5b50\u7ec4\u4ef6\u5185\u5b58\u5728\u53c2\u6570\uff0c\u5e76\u4e14\u5e0c\u671b\u5c06\u5176\u4f20\u9012\u7ed9\u7236 [&hellip;]<\/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-38317","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u3010React\u3011\u5c06\u503c\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u2026\u603b\u7ed3\uff08\u5bf9\u4e8e\u51fd\u6570\u7ec4\u4ef6\u7684\u60c5\u51b5\uff09 - 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\/\u3010react\u3011\u5c06\u503c\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u603b\u7ed3\uff08\u5bf9\u4e8e\u51fd\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010React\u3011\u5c06\u503c\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u2026\u603b\u7ed3\uff08\u5bf9\u4e8e\u51fd\u6570\u7ec4\u4ef6\u7684\u60c5\u51b5\uff09\" \/>\n<meta property=\"og:description\" content=\"\u5728React\u4e2d\uff0c\u53ef\u4ee5\u4f7f\u7528props\u5c06\u51fd\u6570\u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\u3002 \u7136\u800c\uff0c\u95ee\u9898\u662f\uff0c\u5f53\u5b50\u7ec4\u4ef6\u5185\u5b58\u5728\u53c2\u6570\uff0c\u5e76\u4e14\u5e0c\u671b\u5c06\u5176\u4f20\u9012\u7ed9\u7236 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react\u3011\u5c06\u503c\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u603b\u7ed3\uff08\u5bf9\u4e8e\u51fd\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-15T07:18:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-03T23:54:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33b837434c4406c66417\/36-0.jpeg\" \/>\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=\"6 \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\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/\",\"name\":\"\u3010React\u3011\u5c06\u503c\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u2026\u603b\u7ed3\uff08\u5bf9\u4e8e\u51fd\u6570\u7ec4\u4ef6\u7684\u60c5\u51b5\uff09 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-09-15T07:18:39+00:00\",\"dateModified\":\"2024-05-03T23:54:50+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010React\u3011\u5c06\u503c\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u2026\u603b\u7ed3\uff08\u5bf9\u4e8e\u51fd\u6570\u7ec4\u4ef6\u7684\u60c5\u51b5\uff09\"}]},{\"@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\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u3010React\u3011\u5c06\u503c\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u2026\u603b\u7ed3\uff08\u5bf9\u4e8e\u51fd\u6570\u7ec4\u4ef6\u7684\u60c5\u51b5\uff09 - 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\/\u3010react\u3011\u5c06\u503c\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u603b\u7ed3\uff08\u5bf9\u4e8e\u51fd\/","og_locale":"zh_CN","og_type":"article","og_title":"\u3010React\u3011\u5c06\u503c\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u2026\u603b\u7ed3\uff08\u5bf9\u4e8e\u51fd\u6570\u7ec4\u4ef6\u7684\u60c5\u51b5\uff09","og_description":"\u5728React\u4e2d\uff0c\u53ef\u4ee5\u4f7f\u7528props\u5c06\u51fd\u6570\u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\u3002 \u7136\u800c\uff0c\u95ee\u9898\u662f\uff0c\u5f53\u5b50\u7ec4\u4ef6\u5185\u5b58\u5728\u53c2\u6570\uff0c\u5e76\u4e14\u5e0c\u671b\u5c06\u5176\u4f20\u9012\u7ed9\u7236 [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010react\u3011\u5c06\u503c\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u603b\u7ed3\uff08\u5bf9\u4e8e\u51fd\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-09-15T07:18:39+00:00","article_modified_time":"2024-05-03T23:54:50+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d33b837434c4406c66417\/36-0.jpeg"}],"author":"\u97f5, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u97f5, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"6 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/","name":"\u3010React\u3011\u5c06\u503c\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u2026\u603b\u7ed3\uff08\u5bf9\u4e8e\u51fd\u6570\u7ec4\u4ef6\u7684\u60c5\u51b5\uff09 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-09-15T07:18:39+00:00","dateModified":"2024-05-03T23:54:50+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u3010React\u3011\u5c06\u503c\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u2026\u603b\u7ed3\uff08\u5bf9\u4e8e\u51fd\u6570\u7ec4\u4ef6\u7684\u60c5\u51b5\uff09"}]},{"@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\/%e3%80%90react%e3%80%91%e5%b0%86%e5%80%bc%e4%bb%8e%e5%ad%90%e7%bb%84%e4%bb%b6%e4%bc%a0%e9%80%92%e7%bb%99%e7%88%b6%e7%bb%84%e4%bb%b6%e6%80%bb%e7%bb%93%ef%bc%88%e5%af%b9%e4%ba%8e%e5%87%bd\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38317","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=38317"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38317\/revisions"}],"predecessor-version":[{"id":97080,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38317\/revisions\/97080"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}