{"id":277,"date":"2026-01-25T01:15:50","date_gmt":"2026-01-24T17:15:50","guid":{"rendered":"https:\/\/skwp.zeabur.app\/2026\/01\/25\/%e3%80%90vibe-coder-%e7%9a%84-react-%e6%95%99%e5%ad%b8%e3%80%9105-%e5%af%a6%e6%88%b0%ef%bc%9a%e7%94%a8-vibe-coding-%e6%89%93%e9%80%a0%e5%ae%8c%e6%95%b4%e6%87%89%e7%94%a8\/"},"modified":"2026-01-25T01:15:50","modified_gmt":"2026-01-24T17:15:50","slug":"%e3%80%90vibe-coder-%e7%9a%84-react-%e6%95%99%e5%ad%b8%e3%80%9105-%e5%af%a6%e6%88%b0%ef%bc%9a%e7%94%a8-vibe-coding-%e6%89%93%e9%80%a0%e5%ae%8c%e6%95%b4%e6%87%89%e7%94%a8","status":"publish","type":"post","link":"https:\/\/blog.itsmygo.uk\/wordpress\/2026\/01\/25\/%e3%80%90vibe-coder-%e7%9a%84-react-%e6%95%99%e5%ad%b8%e3%80%9105-%e5%af%a6%e6%88%b0%ef%bc%9a%e7%94%a8-vibe-coding-%e6%89%93%e9%80%a0%e5%ae%8c%e6%95%b4%e6%87%89%e7%94%a8\/","title":{"rendered":"\u3010Vibe Coder \u7684 React \u6559\u5b78\u3011#05 \u5be6\u6230\uff1a\u7528 Vibe Coding \u6253\u9020\u5b8c\u6574\u61c9\u7528"},"content":{"rendered":"\n<div id=\"quiz-basic\">\n<style>\n#quiz-basic .question {\n        background: white;\n        border-radius: 8px;\n        padding: 20px;\n        margin: 20px 0;\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n      }#quiz-basic .question h3 {\n        margin-top: 0;\n        color: #333;\n      }#quiz-basic .options {\n        list-style: none;\n        padding: 0;\n      }#quiz-basic .options li {\n        padding: 12px 15px;\n        margin: 8px 0;\n        border: 2px solid #ddd;\n        border-radius: 6px;\n        cursor: pointer;\n        transition: all 0.2s;\n      }#quiz-basic .options li:hover:not(.disabled) {\n        border-color: #4caf50;\n        background: #f0fff0;\n      }#quiz-basic .options li.correct {\n        border-color: #4caf50;\n        background: #e8f5e9;\n      }#quiz-basic .options li.wrong {\n        border-color: #f44336;\n        background: #ffebee;\n      }#quiz-basic .options li.disabled {\n        cursor: default;\n        opacity: 0.7;\n      }#quiz-basic .options li.show-answer {\n        border-color: #4caf50;\n        background: #e8f5e9;\n      }#quiz-basic .feedback {\n        margin-top: 15px;\n        padding: 12px;\n        border-radius: 6px;\n        display: none;\n      }#quiz-basic .feedback.correct {\n        background: #e8f5e9;\n        color: #2e7d32;\n        display: block;\n      }#quiz-basic .feedback.wrong {\n        background: #ffebee;\n        color: #c62828;\n        display: block;\n      }#quiz-basic .score {\n        text-align: center;\n        font-size: 1.5em;\n        padding: 20px;\n        background: white;\n        border-radius: 8px;\n        margin-top: 20px;\n      }#quiz-basic .code-block {\n        background: #1e1e1e;\n        color: #d4d4d4;\n        padding: 14px;\n        border-radius: 6px;\n        font-family: \"Monaco\", \"Consolas\", \"Courier New\", monospace;\n        font-size: 0.9em;\n        overflow-x: auto;\n        margin: 12px 0;\n        white-space: pre-wrap;\n      }\n<\/style>\n<h1>\u6e2c\u9a57\uff1aVibe Coder \u7684 React \u6559\u5b78 #05 \u5be6\u6230\u7bc7<\/h1>\n    <p>\u5171 5 \u984c\uff0c\u9ede\u9078\u7b54\u6848\u5f8c\u6703\u7acb\u5373\u986f\u793a\u7d50\u679c<\/p>\n\n    <div class=\"question\" id=\"q1\">\n      <h3>1. \u5728\u5f85\u8fa6\u4e8b\u9805\u61c9\u7528\u4e2d\uff0c\u70ba\u4ec0\u9ebc <code>todos<\/code> \u72c0\u614b\u8981\u653e\u5728 <code>App<\/code> \u5143\u4ef6\u88e1\uff0c\u800c\u4e0d\u662f\u653e\u5728 <code>TodoList<\/code> \u5143\u4ef6\u88e1\uff1f<\/h3>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(1, 'A', 'B')\">A. \u56e0\u70ba App \u662f\u7b2c\u4e00\u500b\u88ab\u5efa\u7acb\u7684\u5143\u4ef6<\/li>\n        <li onclick=\"checkAnswer(1, 'B', 'B')\">B. \u56e0\u70ba TodoInput\u3001TodoFilter\u3001TodoList \u90fd\u9700\u8981\u7528\u5230\u9019\u500b\u8cc7\u6599\uff0cApp \u662f\u5b83\u5011\u7684\u5171\u540c\u7956\u5148<\/li>\n        <li onclick=\"checkAnswer(1, 'C', 'B')\">C. \u56e0\u70ba App \u7684\u6548\u80fd\u6bd4\u8f03\u597d<\/li>\n        <li onclick=\"checkAnswer(1, 'D', 'B')\">D. \u56e0\u70ba React \u898f\u5b9a\u72c0\u614b\u53ea\u80fd\u653e\u5728\u6700\u4e0a\u5c64\u5143\u4ef6<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb1\"><\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q2\">\n      <h3>2. \u4ee5\u4e0b\u7a0b\u5f0f\u78bc\u4e2d\uff0c<code>e.preventDefault()<\/code> \u7684\u4f5c\u7528\u662f\u4ec0\u9ebc\uff1f<\/h3>\n      <div class=\"code-block\">const handleSubmit = (e) => {\n    e.preventDefault();\n    if (text.trim()) {\n        onAdd(text);\n        setText(&#8221;);\n    }\n};<\/div>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(2, 'A', 'C')\">A. \u963b\u6b62 onAdd \u51fd\u5f0f\u88ab\u547c\u53eb<\/li>\n        <li onclick=\"checkAnswer(2, 'B', 'C')\">B. \u6e05\u7a7a\u8f38\u5165\u6846\u7684\u5167\u5bb9<\/li>\n        <li onclick=\"checkAnswer(2, 'C', 'C')\">C. \u963b\u6b62\u8868\u55ae\u9001\u51fa\u6642\u9801\u9762\u91cd\u65b0\u6574\u7406<\/li>\n        <li onclick=\"checkAnswer(2, 'D', 'C')\">D. \u6aa2\u67e5 text \u662f\u5426\u70ba\u7a7a\u767d<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb2\"><\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q3\">\n      <h3>3. \u522a\u9664\u5f85\u8fa6\u4e8b\u9805\u6642\u4f7f\u7528 <code>todos.filter(todo => todo.id !== id)<\/code>\uff0c\u9019\u884c\u7a0b\u5f0f\u78bc\u7684\u908f\u8f2f\u662f\u4ec0\u9ebc\uff1f<\/h3>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(3, 'A', 'B')\">A. \u627e\u51fa id \u7b49\u65bc\u50b3\u5165\u503c\u7684\u9805\u76ee\u4e26\u522a\u9664\u5b83<\/li>\n        <li onclick=\"checkAnswer(3, 'B', 'B')\">B. \u5efa\u7acb\u65b0\u9663\u5217\uff0c\u4fdd\u7559 id \u4e0d\u7b49\u65bc\u50b3\u5165\u503c\u7684\u6240\u6709\u9805\u76ee<\/li>\n        <li onclick=\"checkAnswer(3, 'C', 'B')\">C. \u76f4\u63a5\u5f9e\u539f\u9663\u5217\u4e2d\u79fb\u9664\u6307\u5b9a\u9805\u76ee<\/li>\n        <li onclick=\"checkAnswer(3, 'D', 'B')\">D. \u5c07\u6307\u5b9a\u9805\u76ee\u7684 id \u8a2d\u70ba null<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb3\"><\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q4\">\n      <h3>4. \u5728\u7be9\u9078\u529f\u80fd\u4e2d\uff0c<code>filteredTodos<\/code> \u548c <code>todos<\/code> \u7684\u95dc\u4fc2\u662f\u4ec0\u9ebc\uff1f<\/h3>\n      <div class=\"code-block\">const filteredTodos = todos.filter(todo => {\n    if (filter === &#8216;all&#8217;) return true;\n    if (filter === &#8216;active&#8217;) return !todo.completed;\n    if (filter === &#8216;completed&#8217;) return todo.completed;\n});<\/div>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(4, 'A', 'D')\">A. filteredTodos \u6703\u76f4\u63a5\u4fee\u6539 todos \u7684\u5167\u5bb9<\/li>\n        <li onclick=\"checkAnswer(4, 'B', 'D')\">B. \u5169\u8005\u5b8c\u5168\u7368\u7acb\uff0c\u4e92\u4e0d\u5f71\u97ff<\/li>\n        <li onclick=\"checkAnswer(4, 'C', 'D')\">C. todos \u662f filteredTodos \u7684\u8907\u88fd\u54c1<\/li>\n        <li onclick=\"checkAnswer(4, 'D', 'D')\">D. filteredTodos \u662f\u6839\u64da\u7be9\u9078\u689d\u4ef6\u904e\u6ffe\u5f8c\u7684\u9663\u5217\uff0c\u986f\u793a\u6642\u7528\u5b83\uff0c\u4f46\u64cd\u4f5c\u6642\u6539\u7684\u662f todos<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb4\"><\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q5\">\n      <h3>5. \u6839\u64da Vibe Coding \u5de5\u4f5c\u6d41\u7a0b\uff0c\u7576 AI \u751f\u6210\u7a0b\u5f0f\u78bc\u5f8c\uff0c\u4e0b\u4e00\u6b65\u61c9\u8a72\u505a\u4ec0\u9ebc\uff1f<\/h3>\n      <ul class=\"options\">\n        <li onclick=\"checkAnswer(5, 'A', 'C')\">A. \u76f4\u63a5\u90e8\u7f72\u4e0a\u7dda<\/li>\n        <li onclick=\"checkAnswer(5, 'B', 'C')\">B. \u8acb AI \u518d\u91cd\u5beb\u4e00\u6b21<\/li>\n        <li onclick=\"checkAnswer(5, 'C', 'C')\">C. \u8b80\u61c2\u7a0b\u5f0f\u78bc\u5728\u505a\u4ec0\u9ebc<\/li>\n        <li onclick=\"checkAnswer(5, 'D', 'C')\">D. \u522a\u9664\u4e0d\u9700\u8981\u7684\u6a94\u6848<\/li>\n      <\/ul>\n      <div class=\"feedback\" id=\"fb5\"><\/div>\n    <\/div>\n\n    <div class=\"score\" id=\"score\" style=\"display:none;\"><\/div>\n<script>\n\n      let answered = 0;\n      let correct = 0;\n      const total = 5;\n      const explanations = {\n        1: \"\u72c0\u614b\u61c9\u8a72\u653e\u5728\u300c\u9700\u8981\u7528\u5230\u9019\u500b\u8cc7\u6599\u7684\u5143\u4ef6\u5011\u300d\u7684\u5171\u540c\u7956\u5148\u3002\u56e0\u70ba TodoInput\u3001TodoFilter\u3001TodoList \u90fd\u9700\u8981\u7528\u5230\u5f85\u8fa6\u8cc7\u6599\uff0c\u5b83\u5011\u7684\u5171\u540c\u7956\u5148\u662f App\u3002\",\n        2: \"\u5728\u8868\u55ae\u7684 onSubmit \u4e8b\u4ef6\u4e2d\uff0ce.preventDefault() \u7528\u4f86\u963b\u6b62\u700f\u89bd\u5668\u9810\u8a2d\u7684\u8868\u55ae\u9001\u51fa\u884c\u70ba\uff0c\u907f\u514d\u9801\u9762\u91cd\u65b0\u6574\u7406\u5c0e\u81f4 React \u61c9\u7528\u72c0\u614b\u907a\u5931\u3002\",\n        3: \"filter \u65b9\u6cd5\u6703\u5efa\u7acb\u4e00\u500b\u65b0\u9663\u5217\uff0c\u53ea\u4fdd\u7559\u56de\u50b3 true \u7684\u9805\u76ee\u3002\u9019\u88e1\u4fdd\u7559\u300cid \u4e0d\u7b49\u65bc\u50b3\u5165\u503c\u300d\u7684\u9805\u76ee\uff0c\u7b49\u65bc\u662f\u628a\u6307\u5b9a\u9805\u76ee\u6392\u9664\u5728\u5916\u3002\",\n        4: \"filteredTodos \u662f\u6839\u64da\u7be9\u9078\u689d\u4ef6\uff08\u5168\u90e8\/\u9032\u884c\u4e2d\/\u5df2\u5b8c\u6210\uff09\u904e\u6ffe\u5f8c\u7522\u751f\u7684\u65b0\u9663\u5217\uff0c\u7528\u65bc\u986f\u793a\u3002\u4f46\u65b0\u589e\u3001\u522a\u9664\u3001\u5207\u63db\u5b8c\u6210\u7b49\u64cd\u4f5c\uff0c\u6539\u7684\u662f\u539f\u59cb\u7684 todos \u72c0\u614b\u3002\",\n        5: \"Vibe Coding \u5f37\u8abf\uff1a\u4e0d\u7528\u6bcf\u884c\u90fd\u6703\u5beb\uff0c\u4f46\u8981\u80fd\u770b\u61c2 AI \u5728\u5e79\u561b\u3002\u6240\u4ee5 AI \u751f\u6210\u7a0b\u5f0f\u78bc\u5f8c\uff0c\u61c9\u8a72\u5148\u8b80\u61c2\u5b83\u7684\u904b\u4f5c\u908f\u8f2f\uff0c\u518d\u9032\u884c\u6e2c\u8a66\u548c\u4fee\u6539\u3002\"\n      };\n\n      function checkAnswer(qNum, selected, correctAns) {\n        const question = document.getElementById(\"q\" + qNum);\n        if (question.classList.contains(\"answered\")) return;\n\n        question.classList.add(\"answered\");\n        answered++;\n\n        const options = question.querySelectorAll(\".options li\");\n        options.forEach((opt) => {\n          opt.classList.add(\"disabled\");\n          if (opt.textContent.startsWith(correctAns + \".\")) {\n            opt.classList.add(\"show-answer\");\n          }\n        });\n\n        const feedback = document.getElementById(\"fb\" + qNum);\n        if (selected === correctAns) {\n          correct++;\n          feedback.className = \"feedback correct\";\n          feedback.innerHTML = \"\u2713 \u6b63\u78ba\uff01\" + explanations[qNum];\n        } else {\n          feedback.className = \"feedback wrong\";\n          feedback.innerHTML =\n            \"\u2717 \u932f\u8aa4\u3002\u6b63\u78ba\u7b54\u6848\u662f \" + correctAns + \"\u3002\" + explanations[qNum];\n          options.forEach((opt) => {\n            if (opt.textContent.startsWith(selected + \".\")) {\n              opt.classList.add(\"wrong\");\n            }\n          });\n        }\n\n        if (answered === total) {\n          const scoreDiv = document.getElementById(\"score\");\n          scoreDiv.style.display = \"block\";\n          scoreDiv.innerHTML =\n            \"\u6e2c\u9a57\u5b8c\u6210\uff01\u5f97\u5206\uff1a\" +\n            correct +\n            \" \/ \" +\n            total +\n            (correct === total\n              ? \" \ud83c\udf89 \u5168\u5c0d\uff01\"\n              : correct >= Math.ceil(total * 0.6)\n                ? \" \ud83d\udc4d \u4e0d\u932f\uff01\"\n                : \" \ud83d\udcda \u518d\u8907\u7fd2\u4e00\u4e0b\u5427\");\n        }\n      }\n    \n<\/script>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u9019\u7bc7\u6587\u7ae0\u5728\u5e79\u561b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5e36\u4f60\u5f9e\u96f6\u958b\u59cb\uff0c\u7528 Vibe Coding \u7684\u65b9\u5f0f\u6253\u9020\u4e00\u500b\u5b8c\u6574\u7684\u5f85\u8fa6\u4e8b\u9805\u61c9\u7528\u3002\u6211\u5011\u6703\u6574\u5408\u524d\u56db\u7bc7\u5b78\u5230\u7684\u6240\u6709\u6982\u5ff5\uff1a\u5143\u4ef6\u3001Props\u3001State\u3001\u4e8b\u4ef6\u8655\u7406\uff0c\u4e26\u5b78\u6703\u5982\u4f55\u8207 AI \u5354\u4f5c\u958b\u767c\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b78\u7fd2\u76ee\u6a19<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u8b80\u5b8c\u9019\u7bc7\uff0c\u4f60\u6703\u77e5\u9053\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5982\u4f55\u7528 AI \u8a0e\u8ad6\u529f\u80fd\u9700\u6c42\u3001\u898f\u5283\u5c08\u6848<\/li>\n<li>\u600e\u9ebc\u628a\u9801\u9762\u62c6\u5206\u6210\u53ef\u91cd\u7528\u7684\u5143\u4ef6<\/li>\n<li>\u72c0\u614b\u8a72\u653e\u54ea\u88e1\u3001\u600e\u9ebc\u7ba1\u7406<\/li>\n<li>\u5b8c\u6574\u5be6\u4f5c\u65b0\u589e\u3001\u522a\u9664\u3001\u6a19\u8a18\u5b8c\u6210\u3001\u7be9\u9078\u529f\u80fd<\/li>\n<li>\u7528 AI \u751f\u6210 CSS \u6a23\u5f0f<\/li>\n<li>\u7a0b\u5f0f\u78bc\u600e\u9ebc\u7d44\u7e54\u624d\u597d\u7dad\u8b77<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e00\u3001\u5c08\u6848\u898f\u5283\uff1a\u7528 AI \u8a0e\u8ad6\u529f\u80fd\u9700\u6c42<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vibe Coding \u7684\u7b2c\u4e00\u6b65\u4e0d\u662f\u5beb\u7a0b\u5f0f\uff0c\u800c\u662f<strong>\u548c AI \u8a0e\u8ad6\u4f60\u60f3\u505a\u4ec0\u9ebc<\/strong>\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f60\u53ef\u4ee5\u9019\u6a23\u554f AI<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">\u6211\u60f3\u505a\u4e00\u500b\u5f85\u8fa6\u4e8b\u9805\u61c9\u7528\uff0c\u9700\u8981\u9019\u4e9b\u529f\u80fd\uff1a\n1. \u65b0\u589e\u5f85\u8fa6\u4e8b\u9805\n2. \u6a19\u8a18\u5b8c\u6210\/\u672a\u5b8c\u6210\n3. \u522a\u9664\u5f85\u8fa6\u4e8b\u9805\n4. \u7be9\u9078\u986f\u793a\uff08\u5168\u90e8\/\u9032\u884c\u4e2d\/\u5df2\u5b8c\u6210\uff09\n\n\u8acb\u5e6b\u6211\u898f\u5283\u5143\u4ef6\u7d50\u69cb\n<\/code><\/span><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">AI \u53ef\u80fd\u9019\u6a23\u56de\u7b54<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">\u5efa\u8b70\u5143\u4ef6\u7d50\u69cb\uff1a\n\nApp\n\u251c\u2500\u2500 Header          <span class=\"hljs-comment\"># \u6a19\u984c<\/span>\n\u251c\u2500\u2500 TodoInput       <span class=\"hljs-comment\"># \u8f38\u5165\u6846 + \u65b0\u589e\u6309\u9215<\/span>\n\u251c\u2500\u2500 TodoFilter      <span class=\"hljs-comment\"># \u7be9\u9078\u6309\u9215\uff08\u5168\u90e8\/\u9032\u884c\u4e2d\/\u5df2\u5b8c\u6210\uff09<\/span>\n\u251c\u2500\u2500 TodoList        <span class=\"hljs-comment\"># \u5f85\u8fa6\u6e05\u55ae\u5bb9\u5668<\/span>\n\u2502   \u2514\u2500\u2500 TodoItem    <span class=\"hljs-comment\"># \u55ae\u4e00\u5f85\u8fa6\u9805\u76ee\uff08\u53ef\u91cd\u8907\uff09<\/span>\n\u2514\u2500\u2500 Footer          <span class=\"hljs-comment\"># \u7d71\u8a08\u8cc7\u8a0a<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1a\u6574\u500b\u61c9\u7528\u62c6\u6210 6 \u500b\u5143\u4ef6\uff0c\u5404\u53f8\u5176\u8077\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vibe Coder \u6aa2\u67e5\u9ede<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u548c AI \u8a0e\u8ad6\u529f\u80fd\u6642\u78ba\u8a8d\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>[ ] \u529f\u80fd\u6e05\u55ae\u5920\u5177\u9ad4\u55ce\uff1f\uff08\u300c\u65b0\u589e\u5f85\u8fa6\u300d\u6bd4\u300c\u7ba1\u7406\u5f85\u8fa6\u300d\u5177\u9ad4\uff09<\/li>\n<li>[ ] \u6709\u6c92\u6709\u907a\u6f0f\u7684\u57fa\u672c\u529f\u80fd\uff1f<\/li>\n<li>[ ] \u5143\u4ef6\u62c6\u5206\u5408\u7406\u55ce\uff1f\uff08\u4e00\u500b\u5143\u4ef6\u505a\u4e00\u4ef6\u4e8b\uff09<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e8c\u3001\u5143\u4ef6\u8a2d\u8a08\uff1a\u62c6\u5206\u9801\u9762\u70ba\u53ef\u91cd\u7528\u5143\u4ef6<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u6700\u5c0f\u7bc4\u4f8b\uff1a\u5143\u4ef6\u7d50\u69cb<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ \u6574\u500b\u61c9\u7528\u7684\u5143\u4ef6\u6a39<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Header<\/span> \/&gt;<\/span>                  {\/* \u6a19\u984c *\/}\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">TodoInput<\/span> \/&gt;<\/span>               {\/* \u8f38\u5165 *\/}\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">TodoFilter<\/span> \/&gt;<\/span>              {\/* \u7be9\u9078 *\/}\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">TodoList<\/span>&gt;<\/span>                  {\/* \u6e05\u55ae *\/}\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">TodoItem<\/span> \/&gt;<\/span>            {\/* \u9805\u76ee *\/}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">TodoList<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1aApp \u662f\u8001\u5927\uff0c\u8ca0\u8cac\u7d44\u5408\u6240\u6709\u5b50\u5143\u4ef6\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u6bcf\u500b\u5143\u4ef6\u7684\u8077\u8cac<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u5143\u4ef6<\/th>\n<th>\u8077\u8cac<\/th>\n<th>\u9700\u8981\u7684\u8cc7\u6599<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>Header<\/code><\/td>\n<td>\u986f\u793a\u6a19\u984c<\/td>\n<td>\u7121<\/td>\n<\/tr>\n<tr>\n<td><code>TodoInput<\/code><\/td>\n<td>\u63a5\u6536\u4f7f\u7528\u8005\u8f38\u5165<\/td>\n<td>\u65b0\u589e\u51fd\u5f0f<\/td>\n<\/tr>\n<tr>\n<td><code>TodoFilter<\/code><\/td>\n<td>\u5207\u63db\u7be9\u9078\u689d\u4ef6<\/td>\n<td>\u76ee\u524d\u7be9\u9078\u72c0\u614b\u3001\u5207\u63db\u51fd\u5f0f<\/td>\n<\/tr>\n<tr>\n<td><code>TodoList<\/code><\/td>\n<td>\u986f\u793a\u5f85\u8fa6\u6e05\u55ae<\/td>\n<td>\u7be9\u9078\u5f8c\u7684\u5f85\u8fa6\u9663\u5217<\/td>\n<\/tr>\n<tr>\n<td><code>TodoItem<\/code><\/td>\n<td>\u986f\u793a\u55ae\u4e00\u5f85\u8fa6<\/td>\n<td>\u5f85\u8fa6\u8cc7\u6599\u3001\u5b8c\u6210\/\u522a\u9664\u51fd\u5f0f<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e09\u3001\u72c0\u614b\u7ba1\u7406\uff1a\u6c7a\u5b9a\u54ea\u4e9b\u8cc7\u6599\u653e\u5728\u54ea\u88e1<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u72c0\u614b\u8a2d\u8a08<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u9019\u500b\u61c9\u7528\u9700\u8981\u5169\u500b\u72c0\u614b\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ \u5728 App \u5143\u4ef6\u4e2d<\/span>\n<span class=\"hljs-keyword\">const<\/span> &#91;todos, setTodos] = useState(&#91;]);        <span class=\"hljs-comment\">\/\/ \u6240\u6709\u5f85\u8fa6\u4e8b\u9805<\/span>\n<span class=\"hljs-keyword\">const<\/span> &#91;filter, setFilter] = useState(<span class=\"hljs-string\">'all'<\/span>);   <span class=\"hljs-comment\">\/\/ \u7be9\u9078\u689d\u4ef6\uff1a'all' | 'active' | 'completed'<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u70ba\u4ec0\u9ebc\u72c0\u614b\u653e\u5728 App\uff1f<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">          App\uff08\u72c0\u614b\u5728\u9019\u88e1\uff09\n         \/    |    \\\n   TodoInput  TodoFilter  TodoList\n                              |\n                          TodoItem\n<\/code><\/span><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u898f\u5247<\/strong>\uff1a\u72c0\u614b\u653e\u5728\u300c\u9700\u8981\u7528\u5230\u9019\u500b\u8cc7\u6599\u7684\u5143\u4ef6\u5011\u300d\u7684\u5171\u540c\u7956\u5148\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u56e0\u70ba <code>TodoInput<\/code>\u3001<code>TodoFilter<\/code>\u3001<code>TodoList<\/code> \u90fd\u9700\u8981\u7528\u5230\u5f85\u8fa6\u8cc7\u6599\uff0c\u5b83\u5011\u7684\u5171\u540c\u7956\u5148\u662f <code>App<\/code>\uff0c\u6240\u4ee5\u72c0\u614b\u653e\u5728 <code>App<\/code>\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5f85\u8fa6\u9805\u76ee\u7684\u8cc7\u6599\u7d50\u69cb<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ \u4e00\u500b\u5f85\u8fa6\u9577\u9019\u6a23<\/span>\n<span class=\"hljs-keyword\">const<\/span> todo = {\n    <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">1<\/span>,                    <span class=\"hljs-comment\">\/\/ \u552f\u4e00\u8b58\u5225\u78bc<\/span>\n    <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">\"\u5b78\u6703 React\"<\/span>,       <span class=\"hljs-comment\">\/\/ \u5167\u5bb9<\/span>\n    <span class=\"hljs-attr\">completed<\/span>: <span class=\"hljs-literal\">false<\/span>          <span class=\"hljs-comment\">\/\/ \u662f\u5426\u5b8c\u6210<\/span>\n};\n\n<span class=\"hljs-comment\">\/\/ \u6574\u500b todos \u9663\u5217<\/span>\n<span class=\"hljs-keyword\">const<\/span> todos = &#91;\n    { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">1<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">\"\u5b78\u6703 React\"<\/span>, <span class=\"hljs-attr\">completed<\/span>: <span class=\"hljs-literal\">false<\/span> },\n    { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">\"\u505a\u5f85\u8fa6\u61c9\u7528\"<\/span>, <span class=\"hljs-attr\">completed<\/span>: <span class=\"hljs-literal\">true<\/span> },\n];\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u56db\u3001\u529f\u80fd\u5be6\u4f5c<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4.1 \u65b0\u589e\u5f85\u8fa6<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ TodoInput \u5143\u4ef6<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">TodoInput<\/span>(<span class=\"hljs-params\">{ onAdd }<\/span>) <\/span>{                    <span class=\"hljs-comment\">\/\/ \u63a5\u6536\u65b0\u589e\u51fd\u5f0f<\/span>\n    <span class=\"hljs-keyword\">const<\/span> &#91;text, setText] = useState(<span class=\"hljs-string\">''<\/span>);          <span class=\"hljs-comment\">\/\/ \u8f38\u5165\u6846\u7684\u5167\u5bb9<\/span>\n\n    <span class=\"hljs-keyword\">const<\/span> handleSubmit = <span class=\"hljs-function\">(<span class=\"hljs-params\">e<\/span>) =&gt;<\/span> {\n        e.preventDefault();                        <span class=\"hljs-comment\">\/\/ \u963b\u6b62\u8868\u55ae\u91cd\u65b0\u6574\u7406<\/span>\n        <span class=\"hljs-keyword\">if<\/span> (text.trim()) {                        <span class=\"hljs-comment\">\/\/ \u78ba\u8a8d\u4e0d\u662f\u7a7a\u767d<\/span>\n            onAdd(text);                          <span class=\"hljs-comment\">\/\/ \u547c\u53eb\u65b0\u589e\u51fd\u5f0f<\/span>\n            setText(<span class=\"hljs-string\">''<\/span>);                          <span class=\"hljs-comment\">\/\/ \u6e05\u7a7a\u8f38\u5165\u6846<\/span>\n        }\n    };\n\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">onSubmit<\/span>=<span class=\"hljs-string\">{handleSubmit}<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n                <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{text}<\/span>\n                <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{(e)<\/span> =&gt;<\/span> setText(e.target.value)}\n                placeholder=\"\u8f38\u5165\u5f85\u8fa6\u4e8b\u9805...\"\n            \/&gt;\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>&gt;<\/span>\u65b0\u589e<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/span>\n    );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ App \u5143\u4ef6\u4e2d\u7684\u65b0\u589e\u51fd\u5f0f<\/span>\n<span class=\"hljs-keyword\">const<\/span> addTodo = <span class=\"hljs-function\">(<span class=\"hljs-params\">text<\/span>) =&gt;<\/span> {\n    <span class=\"hljs-keyword\">const<\/span> newTodo = {\n        <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-built_in\">Date<\/span>.now(),              <span class=\"hljs-comment\">\/\/ \u7528\u6642\u9593\u6233\u7576 ID<\/span>\n        <span class=\"hljs-attr\">text<\/span>: text,\n        <span class=\"hljs-attr\">completed<\/span>: <span class=\"hljs-literal\">false<\/span>\n    };\n    setTodos(&#91;...todos, newTodo]);   <span class=\"hljs-comment\">\/\/ \u5c55\u958b\u820a\u9663\u5217 + \u65b0\u9805\u76ee<\/span>\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>TodoInput<\/code> \u7ba1\u7406\u300c\u6b63\u5728\u8f38\u5165\u4ec0\u9ebc\u300d<\/li>\n<li>\u6309\u4e0b\u65b0\u589e\u6642\uff0c\u547c\u53eb <code>onAdd<\/code> \u628a\u6587\u5b57\u50b3\u7d66 <code>App<\/code><\/li>\n<li><code>App<\/code> \u5efa\u7acb\u65b0\u7269\u4ef6\uff0c\u52a0\u5230\u9663\u5217\u5c3e\u7aef<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4.2 \u522a\u9664\u5f85\u8fa6<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ App \u5143\u4ef6\u4e2d<\/span>\n<span class=\"hljs-keyword\">const<\/span> deleteTodo = <span class=\"hljs-function\">(<span class=\"hljs-params\">id<\/span>) =&gt;<\/span> {\n    setTodos(todos.filter(<span class=\"hljs-function\"><span class=\"hljs-params\">todo<\/span> =&gt;<\/span> todo.id !== id));\n    <span class=\"hljs-comment\">\/\/              \u2191 \u4fdd\u7559 id \u4e0d\u7b49\u65bc\u50b3\u5165 id \u7684\u9805\u76ee<\/span>\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ TodoItem \u5143\u4ef6<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">TodoItem<\/span>(<span class=\"hljs-params\">{ todo, onDelete, onToggle }<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span>&gt;<\/span>{todo.text}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> onDelete(todo.id)}&gt;\u522a\u9664<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span><\/span>\n    );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1a<code>filter<\/code> \u6703\u5efa\u7acb\u65b0\u9663\u5217\uff0c\u53ea\u4fdd\u7559\u689d\u4ef6\u70ba <code>true<\/code> \u7684\u9805\u76ee\u3002\u522a\u9664\u5c31\u662f\u300c\u4fdd\u7559 id \u4e0d\u7b26\u5408\u7684\u300d\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.3 \u6a19\u8a18\u5b8c\u6210<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ App \u5143\u4ef6\u4e2d<\/span>\n<span class=\"hljs-keyword\">const<\/span> toggleTodo = <span class=\"hljs-function\">(<span class=\"hljs-params\">id<\/span>) =&gt;<\/span> {\n    setTodos(todos.map(<span class=\"hljs-function\"><span class=\"hljs-params\">todo<\/span> =&gt;<\/span>\n        todo.id === id\n            ? { ...todo, <span class=\"hljs-attr\">completed<\/span>: !todo.completed }   <span class=\"hljs-comment\">\/\/ \u627e\u5230\u5c31\u5207\u63db<\/span>\n            : todo                                       <span class=\"hljs-comment\">\/\/ \u6c92\u627e\u5230\u5c31\u4fdd\u6301\u539f\u6a23<\/span>\n    ));\n};\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ TodoItem \u5143\u4ef6<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">TodoItem<\/span>(<span class=\"hljs-params\">{ todo, onDelete, onToggle }<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n                <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"checkbox\"<\/span>\n                <span class=\"hljs-attr\">checked<\/span>=<span class=\"hljs-string\">{todo.completed}<\/span>\n                <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> onToggle(todo.id)}\n            \/&gt;\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">{{<\/span>\n                <span class=\"hljs-attr\">textDecoration:<\/span> <span class=\"hljs-attr\">todo.completed<\/span> ? '<span class=\"hljs-attr\">line-through<\/span>' <span class=\"hljs-attr\">:<\/span> '<span class=\"hljs-attr\">none<\/span>'\n            }}&gt;<\/span>\n                {todo.text}\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> onDelete(todo.id)}&gt;\u522a\u9664<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span><\/span>\n    );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>map<\/code> \u904d\u6b77\u6bcf\u500b\u9805\u76ee<\/li>\n<li>\u627e\u5230\u8981\u5207\u63db\u7684\uff0c\u7528\u5c55\u958b\u8907\u88fd\u4e26\u6539 <code>completed<\/code><\/li>\n<li>\u5176\u4ed6\u7684\u4fdd\u6301\u4e0d\u8b8a<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4.4 \u7be9\u9078\u529f\u80fd<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ App \u5143\u4ef6\u4e2d<\/span>\n<span class=\"hljs-keyword\">const<\/span> &#91;filter, setFilter] = useState(<span class=\"hljs-string\">'all'<\/span>);\n\n<span class=\"hljs-comment\">\/\/ \u6839\u64da\u7be9\u9078\u689d\u4ef6\u904e\u6ffe<\/span>\n<span class=\"hljs-keyword\">const<\/span> filteredTodos = todos.filter(<span class=\"hljs-function\"><span class=\"hljs-params\">todo<\/span> =&gt;<\/span> {\n    <span class=\"hljs-keyword\">if<\/span> (filter === <span class=\"hljs-string\">'all'<\/span>) <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-literal\">true<\/span>;           <span class=\"hljs-comment\">\/\/ \u5168\u90e8<\/span>\n    <span class=\"hljs-keyword\">if<\/span> (filter === <span class=\"hljs-string\">'active'<\/span>) <span class=\"hljs-keyword\">return<\/span> !todo.completed;   <span class=\"hljs-comment\">\/\/ \u9032\u884c\u4e2d<\/span>\n    <span class=\"hljs-keyword\">if<\/span> (filter === <span class=\"hljs-string\">'completed'<\/span>) <span class=\"hljs-keyword\">return<\/span> todo.completed;  <span class=\"hljs-comment\">\/\/ \u5df2\u5b8c\u6210<\/span>\n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\"><span class=\"hljs-comment\">\/\/ TodoFilter \u5143\u4ef6<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">TodoFilter<\/span><span class=\"hljs-params\">({ filter, onFilterChange })<\/span> <\/span>{\n    <span class=\"hljs-keyword\">return<\/span> (\n        &lt;div&gt;\n            &lt;button\n                onClick={() =&gt; onFilterChange(<span class=\"hljs-string\">'all'<\/span>)}\n                style={{ fontWeight: filter === <span class=\"hljs-string\">'all'<\/span> ? <span class=\"hljs-string\">'bold'<\/span> : <span class=\"hljs-string\">'normal'<\/span> }}\n            &gt;\n                \u5168\u90e8\n            &lt;\/button&gt;\n            &lt;button\n                onClick={() =&gt; onFilterChange(<span class=\"hljs-string\">'active'<\/span>)}\n                style={{ fontWeight: filter === <span class=\"hljs-string\">'active'<\/span> ? <span class=\"hljs-string\">'bold'<\/span> : <span class=\"hljs-string\">'normal'<\/span> }}\n            &gt;\n                \u9032\u884c\u4e2d\n            &lt;\/button&gt;\n            &lt;button\n                onClick={() =&gt; onFilterChange(<span class=\"hljs-string\">'completed'<\/span>)}\n                style={{ fontWeight: filter === <span class=\"hljs-string\">'completed'<\/span> ? <span class=\"hljs-string\">'bold'<\/span> : <span class=\"hljs-string\">'normal'<\/span> }}\n            &gt;\n                \u5df2\u5b8c\u6210\n            &lt;\/button&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7ffb\u8b6f<\/strong>\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>filteredTodos<\/code> \u662f\u6839\u64da <code>filter<\/code> \u904e\u6ffe\u5f8c\u7684\u9663\u5217<\/li>\n<li>\u986f\u793a\u6642\u7528 <code>filteredTodos<\/code>\uff0c\u4f46\u64cd\u4f5c\u6642\u6539\u7684\u662f\u539f\u59cb <code>todos<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e94\u3001\u5b8c\u6574\u7a0b\u5f0f\u78bc<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">App.jsx\uff08\u4e3b\u5143\u4ef6\uff09<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> TodoInput <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/TodoInput'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> TodoFilter <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/TodoFilter'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> TodoList <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/TodoList'<\/span>;\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/App.css'<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n    <span class=\"hljs-comment\">\/\/ \u72c0\u614b<\/span>\n    <span class=\"hljs-keyword\">const<\/span> &#91;todos, setTodos] = useState(&#91;]);\n    <span class=\"hljs-keyword\">const<\/span> &#91;filter, setFilter] = useState(<span class=\"hljs-string\">'all'<\/span>);\n\n    <span class=\"hljs-comment\">\/\/ \u65b0\u589e<\/span>\n    <span class=\"hljs-keyword\">const<\/span> addTodo = <span class=\"hljs-function\">(<span class=\"hljs-params\">text<\/span>) =&gt;<\/span> {\n        setTodos(&#91;...todos, {\n            <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-built_in\">Date<\/span>.now(),\n            text,\n            <span class=\"hljs-attr\">completed<\/span>: <span class=\"hljs-literal\">false<\/span>\n        }]);\n    };\n\n    <span class=\"hljs-comment\">\/\/ \u522a\u9664<\/span>\n    <span class=\"hljs-keyword\">const<\/span> deleteTodo = <span class=\"hljs-function\">(<span class=\"hljs-params\">id<\/span>) =&gt;<\/span> {\n        setTodos(todos.filter(<span class=\"hljs-function\"><span class=\"hljs-params\">todo<\/span> =&gt;<\/span> todo.id !== id));\n    };\n\n    <span class=\"hljs-comment\">\/\/ \u5207\u63db\u5b8c\u6210<\/span>\n    <span class=\"hljs-keyword\">const<\/span> toggleTodo = <span class=\"hljs-function\">(<span class=\"hljs-params\">id<\/span>) =&gt;<\/span> {\n        setTodos(todos.map(<span class=\"hljs-function\"><span class=\"hljs-params\">todo<\/span> =&gt;<\/span>\n            todo.id === id\n                ? { ...todo, <span class=\"hljs-attr\">completed<\/span>: !todo.completed }\n                : todo\n        ));\n    };\n\n    <span class=\"hljs-comment\">\/\/ \u7be9\u9078<\/span>\n    <span class=\"hljs-keyword\">const<\/span> filteredTodos = todos.filter(<span class=\"hljs-function\"><span class=\"hljs-params\">todo<\/span> =&gt;<\/span> {\n        <span class=\"hljs-keyword\">if<\/span> (filter === <span class=\"hljs-string\">'all'<\/span>) <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-literal\">true<\/span>;\n        <span class=\"hljs-keyword\">if<\/span> (filter === <span class=\"hljs-string\">'active'<\/span>) <span class=\"hljs-keyword\">return<\/span> !todo.completed;\n        <span class=\"hljs-keyword\">if<\/span> (filter === <span class=\"hljs-string\">'completed'<\/span>) <span class=\"hljs-keyword\">return<\/span> todo.completed;\n    });\n\n    <span class=\"hljs-comment\">\/\/ \u7d71\u8a08<\/span>\n    <span class=\"hljs-keyword\">const<\/span> activeCount = todos.filter(<span class=\"hljs-function\"><span class=\"hljs-params\">t<\/span> =&gt;<\/span> !t.completed).length;\n\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"app\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>My Todos<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">TodoInput<\/span> <span class=\"hljs-attr\">onAdd<\/span>=<span class=\"hljs-string\">{addTodo}<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">TodoFilter<\/span> <span class=\"hljs-attr\">filter<\/span>=<span class=\"hljs-string\">{filter}<\/span> <span class=\"hljs-attr\">onFilterChange<\/span>=<span class=\"hljs-string\">{setFilter}<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">TodoList<\/span>\n                <span class=\"hljs-attr\">todos<\/span>=<span class=\"hljs-string\">{filteredTodos}<\/span>\n                <span class=\"hljs-attr\">onToggle<\/span>=<span class=\"hljs-string\">{toggleTodo}<\/span>\n                <span class=\"hljs-attr\">onDelete<\/span>=<span class=\"hljs-string\">{deleteTodo}<\/span>\n            \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>{activeCount} \u9805\u5f85\u5b8c\u6210<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">TodoInput.jsx<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">TodoInput<\/span>(<span class=\"hljs-params\">{ onAdd }<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> &#91;text, setText] = useState(<span class=\"hljs-string\">''<\/span>);\n\n    <span class=\"hljs-keyword\">const<\/span> handleSubmit = <span class=\"hljs-function\">(<span class=\"hljs-params\">e<\/span>) =&gt;<\/span> {\n        e.preventDefault();\n        <span class=\"hljs-keyword\">if<\/span> (text.trim()) {\n            onAdd(text);\n            setText(<span class=\"hljs-string\">''<\/span>);\n        }\n    };\n\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">onSubmit<\/span>=<span class=\"hljs-string\">{handleSubmit}<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"todo-input\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n                <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{text}<\/span>\n                <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{(e)<\/span> =&gt;<\/span> setText(e.target.value)}\n                placeholder=\"\u8f38\u5165\u5f85\u8fa6\u4e8b\u9805...\"\n            \/&gt;\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span>&gt;<\/span>\u65b0\u589e<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/span>\n    );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> TodoInput;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">TodoFilter.jsx<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">TodoFilter<\/span>(<span class=\"hljs-params\">{ filter, onFilterChange }<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">const<\/span> buttons = &#91;\n        { <span class=\"hljs-attr\">key<\/span>: <span class=\"hljs-string\">'all'<\/span>, <span class=\"hljs-attr\">label<\/span>: <span class=\"hljs-string\">'\u5168\u90e8'<\/span> },\n        { <span class=\"hljs-attr\">key<\/span>: <span class=\"hljs-string\">'active'<\/span>, <span class=\"hljs-attr\">label<\/span>: <span class=\"hljs-string\">'\u9032\u884c\u4e2d'<\/span> },\n        { <span class=\"hljs-attr\">key<\/span>: <span class=\"hljs-string\">'completed'<\/span>, <span class=\"hljs-attr\">label<\/span>: <span class=\"hljs-string\">'\u5df2\u5b8c\u6210'<\/span> }\n    ];\n\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"todo-filter\"<\/span>&gt;<\/span>\n            {buttons.map(btn =&gt; (\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                    <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{btn.key}<\/span>\n                    <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> onFilterChange(btn.key)}\n                    className={filter === btn.key ? 'active' : ''}\n                &gt;\n                    {btn.label}\n                <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n            ))}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> TodoFilter;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">TodoList.jsx<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> TodoItem <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/TodoItem'<\/span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">TodoList<\/span>(<span class=\"hljs-params\">{ todos, onToggle, onDelete }<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">if<\/span> (todos.length === <span class=\"hljs-number\">0<\/span>) {\n        <span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"empty\"<\/span>&gt;<\/span>\u6c92\u6709\u5f85\u8fa6\u4e8b\u9805<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/span>;\n    }\n\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"todo-list\"<\/span>&gt;<\/span>\n            {todos.map(todo =&gt; (\n                <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">TodoItem<\/span>\n                    <span class=\"hljs-attr\">key<\/span>=<span class=\"hljs-string\">{todo.id}<\/span>\n                    <span class=\"hljs-attr\">todo<\/span>=<span class=\"hljs-string\">{todo}<\/span>\n                    <span class=\"hljs-attr\">onToggle<\/span>=<span class=\"hljs-string\">{onToggle}<\/span>\n                    <span class=\"hljs-attr\">onDelete<\/span>=<span class=\"hljs-string\">{onDelete}<\/span>\n                \/&gt;<\/span>\n            ))}\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span><\/span>\n    );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> TodoList;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">TodoItem.jsx<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">TodoItem<\/span>(<span class=\"hljs-params\">{ todo, onToggle, onDelete }<\/span>) <\/span>{\n    <span class=\"hljs-keyword\">return<\/span> (\n        <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">todo-item<\/span> ${<span class=\"hljs-attr\">todo.completed<\/span> ? '<span class=\"hljs-attr\">completed<\/span>' <span class=\"hljs-attr\">:<\/span> ''}`}&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span>\n                <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"checkbox\"<\/span>\n                <span class=\"hljs-attr\">checked<\/span>=<span class=\"hljs-string\">{todo.completed}<\/span>\n                <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> onToggle(todo.id)}\n            \/&gt;\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"todo-text\"<\/span>&gt;<\/span>{todo.text}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n                <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{()<\/span> =&gt;<\/span> onDelete(todo.id)}\n                className=\"delete-btn\"\n            &gt;\n                \u522a\u9664\n            <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span><\/span>\n    );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> TodoItem;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u516d\u3001\u6a23\u5f0f\u7f8e\u5316\uff1a\u7528 AI \u751f\u6210 CSS<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f60\u53ef\u4ee5\u9019\u6a23\u554f AI<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">\u8acb\u5e6b\u6211\u751f\u6210\u9019\u500b\u5f85\u8fa6\u61c9\u7528\u7684 CSS\uff0c\u8981\u6c42\uff1a\n- \u7c21\u6f54\u73fe\u4ee3\u98a8\u683c\n- \u97ff\u61c9\u5f0f\u8a2d\u8a08\n- \u5b8c\u6210\u7684\u9805\u76ee\u8981\u6709\u522a\u9664\u7dda\u548c\u7070\u8272\n<\/code><\/span><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">AI \u53ef\u80fd\u751f\u6210\u7684 CSS<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-18\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* App.css *\/<\/span>\n<span class=\"hljs-selector-class\">.app<\/span> {\n    <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">500px<\/span>;\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">40px<\/span> auto;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">20px<\/span>;\n    <span class=\"hljs-attribute\">font-family<\/span>: -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n<span class=\"hljs-selector-tag\">h1<\/span> {\n    <span class=\"hljs-attribute\">text-align<\/span>: center;\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#333<\/span>;\n}\n\n<span class=\"hljs-comment\">\/* \u8f38\u5165\u5340 *\/<\/span>\n<span class=\"hljs-selector-class\">.todo-input<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">10px<\/span>;\n    <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.todo-input<\/span> <span class=\"hljs-selector-tag\">input<\/span> {\n    <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#ddd<\/span>;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n    <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">16px<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.todo-input<\/span> <span class=\"hljs-selector-tag\">button<\/span> {\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span> <span class=\"hljs-number\">20px<\/span>;\n    <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#4CAF50<\/span>;\n    <span class=\"hljs-attribute\">color<\/span>: white;\n    <span class=\"hljs-attribute\">border<\/span>: none;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n    <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n}\n\n<span class=\"hljs-comment\">\/* \u7be9\u9078\u6309\u9215 *\/<\/span>\n<span class=\"hljs-selector-class\">.todo-filter<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">10px<\/span>;\n    <span class=\"hljs-attribute\">margin-bottom<\/span>: <span class=\"hljs-number\">20px<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.todo-filter<\/span> <span class=\"hljs-selector-tag\">button<\/span> {\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">8px<\/span> <span class=\"hljs-number\">16px<\/span>;\n    <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#ddd<\/span>;\n    <span class=\"hljs-attribute\">background<\/span>: white;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n    <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n}\n\n<span class=\"hljs-selector-class\">.todo-filter<\/span> <span class=\"hljs-selector-tag\">button<\/span><span class=\"hljs-selector-class\">.active<\/span> {\n    <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#333<\/span>;\n    <span class=\"hljs-attribute\">color<\/span>: white;\n}\n\n<span class=\"hljs-comment\">\/* \u6e05\u55ae *\/<\/span>\n<span class=\"hljs-selector-class\">.todo-list<\/span> {\n    <span class=\"hljs-attribute\">list-style<\/span>: none;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.todo-item<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: flex;\n    <span class=\"hljs-attribute\">align-items<\/span>: center;\n    <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">10px<\/span>;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">12px<\/span>;\n    <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#eee<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.todo-item<\/span><span class=\"hljs-selector-class\">.completed<\/span> <span class=\"hljs-selector-class\">.todo-text<\/span> {\n    <span class=\"hljs-attribute\">text-decoration<\/span>: line-through;\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#999<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.todo-text<\/span> {\n    <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">1<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.delete-btn<\/span> {\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">5px<\/span> <span class=\"hljs-number\">10px<\/span>;\n    <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#ff4444<\/span>;\n    <span class=\"hljs-attribute\">color<\/span>: white;\n    <span class=\"hljs-attribute\">border<\/span>: none;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">4px<\/span>;\n    <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n}\n\n<span class=\"hljs-selector-class\">.empty<\/span> {\n    <span class=\"hljs-attribute\">text-align<\/span>: center;\n    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#999<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-18\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e03\u3001\u7a0b\u5f0f\u78bc\u7d44\u7e54\uff1a\u8cc7\u6599\u593e\u7d50\u69cb\u8207\u547d\u540d<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u5efa\u8b70\u7684\u5c08\u6848\u7d50\u69cb<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-19\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php\">src\/\n\u251c\u2500\u2500 App.jsx              <span class=\"hljs-comment\"># \u4e3b\u5143\u4ef6<\/span>\n\u251c\u2500\u2500 App.css              <span class=\"hljs-comment\"># \u4e3b\u6a23\u5f0f<\/span>\n\u251c\u2500\u2500 main.jsx             <span class=\"hljs-comment\"># \u9032\u5165\u9ede<\/span>\n\u2514\u2500\u2500 components\/          <span class=\"hljs-comment\"># \u5143\u4ef6\u8cc7\u6599\u593e<\/span>\n    \u251c\u2500\u2500 TodoInput.jsx\n    \u251c\u2500\u2500 TodoFilter.jsx\n    \u251c\u2500\u2500 TodoList.jsx\n    \u2514\u2500\u2500 TodoItem.jsx\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-19\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u547d\u540d\u6163\u4f8b<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u985e\u578b<\/th>\n<th>\u6163\u4f8b<\/th>\n<th>\u7bc4\u4f8b<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u5143\u4ef6\u6a94\u6848<\/td>\n<td>PascalCase<\/td>\n<td><code>TodoItem.jsx<\/code><\/td>\n<\/tr>\n<tr>\n<td>\u5143\u4ef6\u51fd\u5f0f<\/td>\n<td>PascalCase<\/td>\n<td><code>function TodoItem()<\/code><\/td>\n<\/tr>\n<tr>\n<td>\u4e00\u822c\u8b8a\u6578<\/td>\n<td>camelCase<\/td>\n<td><code>const filteredTodos<\/code><\/td>\n<\/tr>\n<tr>\n<td>\u4e8b\u4ef6\u8655\u7406<\/td>\n<td>handle\/on \u958b\u982d<\/td>\n<td><code>handleSubmit<\/code>, <code>onDelete<\/code><\/td>\n<\/tr>\n<tr>\n<td>\u72c0\u614b\u66f4\u65b0<\/td>\n<td>set \u958b\u982d<\/td>\n<td><code>setTodos<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u7576\u4f60\u8acb AI \u91cd\u69cb\u6642<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-20\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">\u8acb\u5e6b\u6211\u628a\u9019\u4e9b\u5143\u4ef6\u642c\u5230 components \u8cc7\u6599\u593e\uff0c\u4e26\u66f4\u65b0 <span class=\"hljs-keyword\">import<\/span> \u8def\u5f91\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-20\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u516b\u3001Vibe Coding \u7e3d\u7d50\uff1a\u6301\u7e8c\u5b78\u7fd2\u7684\u5fc3\u6cd5<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Vibe Coding \u5de5\u4f5c\u6d41\u7a0b<\/h3>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">1. \u544a\u8a34 AI \u4f60\u8981\u505a\u4ec0\u9ebc\n   \u2193\n2. AI \u751f\u6210\u4ee3\u78bc\n   \u2193\n3. \u8b80\u61c2\u4ee3\u78bc\u5728\u5e79\u561b\uff08\u9019\u7cfb\u5217\u6559\u4f60\u7684\uff01\uff09\n   \u2193\n4. \u6e2c\u8a66\u529f\u80fd\n   \u2193\n5. \u8acb AI \u4fee\u6539\/\u512a\u5316\n   \u2193\n6. \u91cd\u8907 3-5\n<\/code><\/span><\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u5982\u4f55\u8d8a\u4f86\u8d8a\u5f37<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u968e\u6bb5<\/th>\n<th>\u4f60\u6703\u505a\u7684\u4e8b<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u521d\u671f<\/td>\n<td>\u770b\u61c2 AI \u5beb\u4ec0\u9ebc\uff0c\u80fd\u5224\u65b7\u5c0d\u4e0d\u5c0d<\/td>\n<\/tr>\n<tr>\n<td>\u4e2d\u671f<\/td>\n<td>\u80fd\u6307\u51fa\u554f\u984c\uff0c\u8acb AI \u4fee\u6539\u7279\u5b9a\u90e8\u5206<\/td>\n<\/tr>\n<tr>\n<td>\u5f8c\u671f<\/td>\n<td>\u81ea\u5df1\u6539\u5c0f\u6771\u897f\uff0c\u5927\u67b6\u69cb\u8b93 AI \u8655\u7406<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u548c AI \u5354\u4f5c\u7684\u6280\u5de7<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u597d\u7684\u63d0\u554f<\/strong>\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">\u9019\u500b TodoList \u5143\u4ef6\uff0c\u7576 todos \u662f\u7a7a\u9663\u5217\u6642\u6703\u986f\u793a\u4ec0\u9ebc\uff1f\n\u53ef\u4ee5\u52a0\u4e00\u500b\u300c\u6c92\u6709\u5f85\u8fa6\u4e8b\u9805\u300d\u7684\u63d0\u793a\u55ce\uff1f\n<\/code><\/span><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u6bd4\u8f03\u4e0d\u597d\u7684\u63d0\u554f<\/strong>\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\"><span><code class=\"hljs\">\u5e6b\u6211\u6539\u597d\u4e00\u9ede\n<\/code><\/span><\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u4e00\u53e5\u8a71<\/strong>\uff1a\u8d8a\u5177\u9ad4\u7684\u554f\u984c\uff0c\u5f97\u5230\u8d8a\u597d\u7684\u7b54\u6848\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u672c\u7cfb\u5217\u91cd\u9ede\u56de\u9867<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u7bc7\u7ae0<\/th>\n<th>\u6838\u5fc3\u6982\u5ff5<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>#01<\/td>\n<td>\u5143\u4ef6\u5c31\u662f\u300c\u53ef\u91cd\u8907\u4f7f\u7528\u7684\u7a4d\u6728\u300d<\/td>\n<\/tr>\n<tr>\n<td>#02<\/td>\n<td>Props \u662f\u300c\u5f9e\u5916\u9762\u50b3\u9032\u4f86\u7684\u8a2d\u5b9a\u300d<\/td>\n<\/tr>\n<tr>\n<td>#03<\/td>\n<td>State \u662f\u300c\u5143\u4ef6\u81ea\u5df1\u8a18\u4f4f\u7684\u8cc7\u6599\u300d<\/td>\n<\/tr>\n<tr>\n<td>#04<\/td>\n<td>\u4e8b\u4ef6\u8655\u7406\u662f\u300c\u4f7f\u7528\u8005\u505a\u4e86\u4ec0\u9ebc\uff0c\u7a0b\u5f0f\u600e\u9ebc\u53cd\u61c9\u300d<\/td>\n<\/tr>\n<tr>\n<td>#05<\/td>\n<td>\u628a\u4ee5\u4e0a\u5168\u90e8\u7d44\u5408\u8d77\u4f86\uff0c\u505a\u51fa\u5b8c\u6574\u61c9\u7528<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Vibe Coder \u6aa2\u67e5\u9ede<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u770b\u5b8c\u9019\u7bc7\uff0c\u4f60\u61c9\u8a72\u80fd\u5920\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>[ ] \u770b\u61c2\u4e00\u500b\u5b8c\u6574 React \u61c9\u7528\u7684\u7d50\u69cb<\/li>\n<li>[ ] \u7406\u89e3\u5143\u4ef6\u4e4b\u9593\u5982\u4f55\u50b3\u905e\u8cc7\u6599\u548c\u51fd\u5f0f<\/li>\n<li>[ ] \u77e5\u9053\u72c0\u614b\u8a72\u653e\u5728\u54ea\u500b\u5143\u4ef6<\/li>\n<li>[ ] \u770b\u61c2 <code>filter<\/code>\u3001<code>map<\/code> \u7b49\u9663\u5217\u64cd\u4f5c<\/li>\n<li>[ ] \u80fd\u548c AI \u8a0e\u8ad6\u529f\u80fd\u9700\u6c42\u4e26\u770b\u61c2\u751f\u6210\u7684\u4ee3\u78bc<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e0b\u4e00\u6b65<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u606d\u559c\u4f60\u5b8c\u6210\u9019\u500b\u7cfb\u5217\uff01\u63a5\u4e0b\u4f86\u4f60\u53ef\u4ee5\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u52d5\u624b\u505a<\/strong>\uff1a\u8acb AI \u5e6b\u4f60\u5efa\u7acb\u9019\u500b\u5f85\u8fa6\u61c9\u7528\uff0c\u908a\u505a\u908a\u5c0d\u7167\u672c\u6587<\/li>\n<li><strong>\u52a0\u529f\u80fd<\/strong>\uff1a\u8a66\u8457\u8acb AI \u52a0\u5165\u7de8\u8f2f\u529f\u80fd\u3001\u672c\u5730\u5132\u5b58\u7b49<\/li>\n<li><strong>\u505a\u81ea\u5df1\u7684\u5c08\u6848<\/strong>\uff1a\u628a\u5b78\u5230\u7684\u61c9\u7528\u5728\u4f60\u60f3\u505a\u7684\u6771\u897f\u4e0a<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\u8a18\u4f4f Vibe Coder \u7684\u6838\u5fc3\uff1a<strong>\u4e0d\u7528\u6bcf\u884c\u90fd\u6703\u5beb\uff0c\u4f46\u8981\u80fd\u770b\u61c2 AI \u5728\u5e79\u561b<\/strong>\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Happy Vibe Coding!<\/p>\n\n\n\n<div id=\"quiz-advanced\">\n<style>\n#quiz-advanced .badge {\n        display: inline-block;\n        padding: 4px 10px;\n        border-radius: 12px;\n        font-size: 0.75em;\n        font-weight: bold;\n        margin-left: 8px;\n      }#quiz-advanced .badge.scenario {\n        background: #ebf8ff;\n        color: #2b6cb0;\n      }#quiz-advanced .badge.debug {\n        background: #fef3c7;\n        color: #92400e;\n      }#quiz-advanced .question-adv {\n        background: white;\n        border-radius: 10px;\n        padding: 24px;\n        margin: 20px 0;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n        border-left: 4px solid #ed8936;\n      }#quiz-advanced .question-adv h3 {\n        margin-top: 0;\n        color: #2d3748;\n      }#quiz-advanced .code-block {\n        background: #1e1e1e;\n        color: #d4d4d4;\n        padding: 14px;\n        border-radius: 6px;\n        font-family: \"Menlo\", \"Monaco\", \"Courier New\", monospace;\n        font-size: 0.9em;\n        overflow-x: auto;\n        margin: 12px 0;\n        white-space: pre-wrap;\n      }#quiz-advanced .options-adv {\n        list-style: none;\n        padding: 0;\n      }#quiz-advanced .options-adv li {\n        padding: 14px 16px;\n        margin: 10px 0;\n        border: 2px solid #e2e8f0;\n        border-radius: 8px;\n        cursor: pointer;\n        transition: all 0.2s;\n      }#quiz-advanced .options-adv li:hover:not(.disabled) {\n        border-color: #ed8936;\n        background: #fffaf0;\n      }#quiz-advanced .options-adv li.disabled {\n        cursor: default;\n        opacity: 0.7;\n      }#quiz-advanced .options-adv li.show-answer {\n        border-color: #48bb78;\n        background: #f0fff4;\n      }#quiz-advanced .options-adv li.wrong {\n        border-color: #fc8181;\n        background: #fff5f5;\n      }#quiz-advanced .feedback-adv {\n        margin-top: 16px;\n        padding: 14px;\n        border-radius: 8px;\n        display: none;\n        line-height: 1.6;\n      }#quiz-advanced .feedback-adv.correct {\n        background: #f0fff4;\n        color: #276749;\n        display: block;\n      }#quiz-advanced .feedback-adv.wrong {\n        background: #fff5f5;\n        color: #c53030;\n        display: block;\n      }#quiz-advanced .feedback-adv \n      .score-adv {\n        text-align: center;\n        font-size: 1.4em;\n        padding: 24px;\n        background: white;\n        border-radius: 10px;\n        margin-top: 24px;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n      }#quiz-advanced .intro {\n        background: #ebf8ff;\n        padding: 16px;\n        border-radius: 8px;\n        margin-bottom: 20px;\n        color: #2c5282;\n      }\n<\/style>\n<h1>\u9032\u968e\u6e2c\u9a57\uff1aVibe Coder \u7684 React \u6559\u5b78 #05 \u5be6\u6230\u7bc7<\/h1>\n    <div class=\"intro\">\n      <strong>\u6e2c\u9a57\u76ee\u6a19\uff1a<\/strong>\u9a57\u8b49\u4f60\u662f\u5426\u80fd\u5728\u5be6\u969b\u60c5\u5883\u4e2d\u61c9\u7528\u6240\u5b78\u3002<br \/>\n      \u5171 5 \u984c\uff0c\u5305\u542b\u60c5\u5883\u984c\u8207\u932f\u8aa4\u8a3a\u65b7\u984c\u3002\n    <\/div>\n\n    <div class=\"question-adv\" id=\"qAdv1\">\n      <h3>1. \u4f60\u6b63\u5728\u958b\u767c\u5f85\u8fa6\u61c9\u7528\uff0c\u9700\u8981\u5be6\u4f5c\u300c\u7de8\u8f2f\u5f85\u8fa6\u5167\u5bb9\u300d\u529f\u80fd\u3002\u76ee\u524d <code>todos<\/code> \u72c0\u614b\u653e\u5728 App \u5143\u4ef6\u4e2d\u3002\u4f60\u61c9\u8a72\u628a\u7de8\u8f2f\u51fd\u5f0f\u653e\u5728\u54ea\u88e1\uff1f <span class=\"badge scenario\">\u60c5\u5883\u984c<\/span><\/h3>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(1, 'A', 'B')\">A. \u653e\u5728 TodoItem \u5143\u4ef6\u4e2d\uff0c\u56e0\u70ba\u7de8\u8f2f\u7684\u662f\u55ae\u4e00\u9805\u76ee<\/li>\n        <li onclick=\"checkAnswerAdv(1, 'B', 'B')\">B. \u653e\u5728 App \u5143\u4ef6\u4e2d\uff0c\u900f\u904e Props \u50b3\u7d66 TodoItem<\/li>\n        <li onclick=\"checkAnswerAdv(1, 'C', 'B')\">C. \u653e\u5728 TodoList \u5143\u4ef6\u4e2d\uff0c\u7d71\u4e00\u7ba1\u7406\u6e05\u55ae<\/li>\n        <li onclick=\"checkAnswerAdv(1, 'D', 'B')\">D. \u5efa\u7acb\u65b0\u7684 EditContext \u4f86\u7ba1\u7406\u7de8\u8f2f\u72c0\u614b<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv1\"><\/div>\n    <\/div>\n\n    <div class=\"question-adv\" id=\"qAdv2\">\n      <h3>2. \u5c0f\u660e\u5beb\u4e86\u4ee5\u4e0b\u7a0b\u5f0f\u78bc\u4f86\u5207\u63db\u5f85\u8fa6\u5b8c\u6210\u72c0\u614b\uff0c\u4f46\u767c\u73fe\u9ede\u64ca\u5f8c\u756b\u9762\u6c92\u6709\u66f4\u65b0\u3002\u554f\u984c\u51fa\u5728\u54ea\u88e1\uff1f <span class=\"badge debug\">\u932f\u8aa4\u8a3a\u65b7<\/span><\/h3>\n      <div class=\"code-block\">const toggleTodo = (id) => {\n    todos.forEach(todo => {\n        if (todo.id === id) {\n            todo.completed = !todo.completed;\n        }\n    });\n};<\/div>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(2, 'A', 'C')\">A. forEach \u7121\u6cd5\u4fee\u6539\u9663\u5217\u5143\u7d20<\/li>\n        <li onclick=\"checkAnswerAdv(2, 'B', 'C')\">B. \u61c9\u8a72\u7528 todo.id == id \u800c\u975e ===<\/li>\n        <li onclick=\"checkAnswerAdv(2, 'C', 'C')\">C. \u76f4\u63a5\u4fee\u6539\u539f\u9663\u5217\u4e0d\u6703\u89f8\u767c React \u91cd\u65b0\u6e32\u67d3\uff0c\u61c9\u8a72\u7528 setTodos \u8a2d\u5b9a\u65b0\u9663\u5217<\/li>\n        <li onclick=\"checkAnswerAdv(2, 'D', 'C')\">D. completed \u5c6c\u6027\u4e0d\u5b58\u5728<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv2\"><\/div>\n    <\/div>\n\n    <div class=\"question-adv\" id=\"qAdv3\">\n      <h3>3. \u4f60\u60f3\u70ba\u5f85\u8fa6\u61c9\u7528\u52a0\u5165\u300c\u6e05\u9664\u6240\u6709\u5df2\u5b8c\u6210\u9805\u76ee\u300d\u7684\u529f\u80fd\u6309\u9215\u3002\u6700\u4f73\u7684\u5be6\u4f5c\u65b9\u5f0f\u662f\uff1f <span class=\"badge scenario\">\u60c5\u5883\u984c<\/span><\/h3>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(3, 'A', 'A')\">A. \u5728 App \u4e2d\u65b0\u589e clearCompleted \u51fd\u5f0f\uff0c\u4f7f\u7528 <code>setTodos(todos.filter(t => !t.completed))<\/code><\/li>\n        <li onclick=\"checkAnswerAdv(3, 'B', 'A')\">B. \u7528 forEach \u904d\u6b77 todos\uff0c\u5c0d\u6bcf\u500b\u5df2\u5b8c\u6210\u9805\u76ee\u547c\u53eb deleteTodo<\/li>\n        <li onclick=\"checkAnswerAdv(3, 'C', 'A')\">C. \u76f4\u63a5\u8a2d\u5b9a <code>todos = todos.filter(t => !t.completed)<\/code><\/li>\n        <li onclick=\"checkAnswerAdv(3, 'D', 'A')\">D. \u5efa\u7acb\u65b0\u7684 clearedTodos \u72c0\u614b\u4f86\u8ffd\u8e64\u88ab\u6e05\u9664\u7684\u9805\u76ee<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv3\"><\/div>\n    <\/div>\n\n    <div class=\"question-adv\" id=\"qAdv4\">\n      <h3>4. \u5c0f\u7f8e\u7684 TodoInput \u5143\u4ef6\u5728\u9001\u51fa\u5f8c\u6c92\u6709\u6e05\u7a7a\u8f38\u5165\u6846\u3002\u4ee5\u4e0b\u662f\u5979\u7684\u7a0b\u5f0f\u78bc\uff0c\u554f\u984c\u5728\u54ea\u88e1\uff1f <span class=\"badge debug\">\u932f\u8aa4\u8a3a\u65b7<\/span><\/h3>\n      <div class=\"code-block\">function TodoInput({ onAdd }) {\n    const [text, setText] = useState(&#8221;);\n\n    const handleSubmit = (e) => {\n        e.preventDefault();\n        onAdd(text);\n        text = &#8221;;\n    };\n\n    return (\n        &lt;form onSubmit={handleSubmit}&gt;\n            &lt;input value={text} onChange={(e) => setText(e.target.value)} \/&gt;\n            &lt;button type=&#8221;submit&#8221;&gt;\u65b0\u589e&lt;\/button&gt;\n        &lt;\/form&gt;\n    );\n}<\/div>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(4, 'A', 'B')\">A. onAdd \u51fd\u5f0f\u6c92\u6709\u6b63\u78ba\u63a5\u6536 text \u53c3\u6578<\/li>\n        <li onclick=\"checkAnswerAdv(4, 'B', 'B')\">B. \u61c9\u8a72\u7528 <code>setText('')<\/code> \u800c\u975e\u76f4\u63a5\u8ce6\u503c <code>text = ''<\/code><\/li>\n        <li onclick=\"checkAnswerAdv(4, 'C', 'B')\">C. e.preventDefault() \u963b\u6b62\u4e86\u6e05\u7a7a\u52d5\u4f5c<\/li>\n        <li onclick=\"checkAnswerAdv(4, 'D', 'B')\">D. input \u7684 value \u5c6c\u6027\u8a2d\u5b9a\u932f\u8aa4<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv4\"><\/div>\n    <\/div>\n\n    <div class=\"question-adv\" id=\"qAdv5\">\n      <h3>5. \u4f60\u60f3\u8acb AI \u5e6b\u4f60\u512a\u5316\u5f85\u8fa6\u61c9\u7528\u7684\u6548\u80fd\u3002\u4ee5\u4e0b\u54ea\u500b\u63d0\u554f\u65b9\u5f0f\u6700\u6709\u6548\uff1f <span class=\"badge scenario\">\u60c5\u5883\u984c<\/span><\/h3>\n      <ul class=\"options-adv\">\n        <li onclick=\"checkAnswerAdv(5, 'A', 'D')\">A. \u300c\u5e6b\u6211\u6539\u597d\u4e00\u9ede\u300d<\/li>\n        <li onclick=\"checkAnswerAdv(5, 'B', 'D')\">B. \u300c\u9019\u500b\u61c9\u7528\u6709\u554f\u984c\u300d<\/li>\n        <li onclick=\"checkAnswerAdv(5, 'C', 'D')\">C. \u300c\u6548\u80fd\u4e0d\u597d\uff0c\u5e6b\u6211\u8655\u7406\u300d<\/li>\n        <li onclick=\"checkAnswerAdv(5, 'D', 'D')\">D. \u300c\u7576 todos \u9663\u5217\u5f88\u9577\u6642\uff0c\u6bcf\u6b21\u7be9\u9078\u90fd\u8981\u91cd\u65b0\u8a08\u7b97\u3002\u53ef\u4ee5\u7528 useMemo \u512a\u5316 filteredTodos \u55ce\uff1f\u300d<\/li>\n      <\/ul>\n      <div class=\"feedback-adv\" id=\"fbAdv5\"><\/div>\n    <\/div>\n\n    <div class=\"score-adv\" id=\"scoreAdv\" style=\"display:none;\"><\/div>\n<script>\n\n      let answeredAdv = 0;\n      let correctAdv = 0;\n      const totalAdv = 5;\n      const explanationsAdv = {\n        1: \"\u72c0\u614b\u5728\u54ea\u88e1\uff0c\u4fee\u6539\u72c0\u614b\u7684\u51fd\u5f0f\u5c31\u61c9\u8a72\u5728\u54ea\u88e1\u3002\u56e0\u70ba todos \u72c0\u614b\u653e\u5728 App\uff0c\u6240\u4ee5 editTodo \u51fd\u5f0f\u4e5f\u61c9\u8a72\u653e\u5728 App\uff0c\u518d\u900f\u904e Props \u50b3\u905e\u7d66\u9700\u8981\u7684\u5b50\u5143\u4ef6\u3002\u9019\u6a23\u624d\u80fd\u6b63\u78ba\u547c\u53eb setTodos \u66f4\u65b0\u72c0\u614b\u3002\",\n        2: \"React \u7684\u72c0\u614b\u66f4\u65b0\u5fc5\u9808\u900f\u904e setter \u51fd\u5f0f\uff08\u5982 setTodos\uff09\u4f86\u89f8\u767c\u91cd\u65b0\u6e32\u67d3\u3002\u76f4\u63a5\u4fee\u6539\u539f\u9663\u5217\u7684\u5c6c\u6027\uff0cReact \u4e0d\u6703\u5bdf\u89ba\u5230\u8b8a\u5316\u3002\u6b63\u78ba\u505a\u6cd5\u662f\u7528 <code>setTodos(todos.map(...))<\/code> \u5efa\u7acb\u65b0\u9663\u5217\u3002\",\n        3: \"\u4f7f\u7528 filter \u5efa\u7acb\u65b0\u9663\u5217\u4e26\u900f\u904e setTodos \u66f4\u65b0\uff0c\u662f React \u4e2d\u4fee\u6539\u9663\u5217\u72c0\u614b\u7684\u6a19\u6e96\u6a21\u5f0f\u3002\u9078\u9805 B \u6703\u89f8\u767c\u591a\u6b21\u72c0\u614b\u66f4\u65b0\uff0c\u6548\u80fd\u8f03\u5dee\uff1b\u9078\u9805 C \u76f4\u63a5\u8ce6\u503c\u4e0d\u6703\u89f8\u767c\u91cd\u65b0\u6e32\u67d3\uff1b\u9078\u9805 D \u904e\u5ea6\u8a2d\u8a08\u3002\",\n        4: \"\u5728 React \u4e2d\uff0cstate \u8b8a\u6578\u662f\u552f\u8b80\u7684\u3002\u8981\u66f4\u65b0\u72c0\u614b\u5fc5\u9808\u4f7f\u7528\u5c0d\u61c9\u7684 setter \u51fd\u5f0f\uff08setText\uff09\u3002\u76f4\u63a5\u8ce6\u503c <code>text = ''<\/code> \u4e0d\u6703\u89f8\u767c\u5143\u4ef6\u91cd\u65b0\u6e32\u67d3\uff0c\u6240\u4ee5\u8f38\u5165\u6846\u4e0d\u6703\u6e05\u7a7a\u3002\",\n        5: \"Vibe Coding \u5f37\u8abf\uff1a\u8d8a\u5177\u9ad4\u7684\u554f\u984c\uff0c\u5f97\u5230\u8d8a\u597d\u7684\u7b54\u6848\u3002\u9078\u9805 D \u660e\u78ba\u6307\u51fa\u554f\u984c\uff08\u6bcf\u6b21\u7be9\u9078\u90fd\u91cd\u65b0\u8a08\u7b97\uff09\u3001\u60c5\u5883\uff08todos \u5f88\u9577\u6642\uff09\u3001\u4ee5\u53ca\u53ef\u80fd\u7684\u89e3\u6cd5\uff08useMemo\uff09\uff0c\u9019\u6a23 AI \u624d\u80fd\u7d66\u51fa\u6709\u91dd\u5c0d\u6027\u7684\u5efa\u8b70\u3002\"\n      };\n\n      function checkAnswerAdv(qNum, selected, correctAns) {\n        const question = document.getElementById(\"qAdv\" + qNum);\n        if (question.classList.contains(\"answered\")) return;\n\n        question.classList.add(\"answered\");\n        answeredAdv++;\n\n        const options = question.querySelectorAll(\".options-adv li\");\n        options.forEach((opt) => {\n          opt.classList.add(\"disabled\");\n          if (opt.textContent.startsWith(correctAns + \".\")) {\n            opt.classList.add(\"show-answer\");\n          }\n        });\n\n        const feedback = document.getElementById(\"fbAdv\" + qNum);\n        if (selected === correctAns) {\n          correctAdv++;\n          feedback.className = \"feedback-adv correct\";\n          feedback.innerHTML = \"\u2713 \u6b63\u78ba\uff01\" + explanationsAdv[qNum];\n        } else {\n          feedback.className = \"feedback-adv wrong\";\n          feedback.innerHTML =\n            \"\u2717 \u932f\u8aa4\u3002\u6b63\u78ba\u7b54\u6848\u662f \" + correctAns + \"\u3002\" + explanationsAdv[qNum];\n          options.forEach((opt) => {\n            if (opt.textContent.startsWith(selected + \".\")) {\n              opt.classList.add(\"wrong\");\n            }\n          });\n        }\n\n        if (answeredAdv === totalAdv) {\n          const scoreDiv = document.getElementById(\"scoreAdv\");\n          scoreDiv.style.display = \"block\";\n          let msg = \"\";\n          if (correctAdv === totalAdv) msg = \"\ud83c\udfaf \u5b8c\u7f8e\uff01\u4f60\u5df2\u7d93\u6e96\u5099\u597d\u5be6\u6230\u4e86\uff01\";\n          else if (correctAdv >= Math.ceil(totalAdv * 0.8))\n            msg = \"\ud83d\udcaa \u5f88\u68d2\uff01\u518d\u8907\u7fd2\u4e00\u4e0b\u932f\u7684\u984c\u76ee\";\n          else if (correctAdv >= Math.ceil(totalAdv * 0.6))\n            msg = \"\ud83d\udcd6 \u5efa\u8b70\u91cd\u8b80\u76f8\u95dc\u6bb5\u843d\u5f8c\u518d\u8a66\u4e00\u6b21\";\n          else msg = \"\ud83d\udd04 \u5efa\u8b70\u91cd\u65b0\u95b1\u8b80\u6587\u4ef6\uff0c\u7279\u5225\u6ce8\u610f\u64cd\u4f5c\u6d41\u7a0b\";\n          scoreDiv.innerHTML =\n            \"\u6e2c\u9a57\u5b8c\u6210\uff01\u5f97\u5206\uff1a\" + correctAdv + \" \/ \" + totalAdv + \"<br>\" + msg;\n        }\n      }\n    \n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u6e2c\u9a57\uff1aVibe Coder \u7684 React \u6559\u5b78 #05 \u5be6\u6230\u7bc7 \u5171 5 \u984c\uff0c\u9ede\u9078\u7b54\u6848\u5f8c\u6703\u7acb\u5373\u986f\u793a\u7d50\u679c 1.  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rolpb_likes":0,"footnotes":""},"categories":[268],"tags":[269],"class_list":["post-277","post","type-post","status-publish","format-standard","hentry","category-react--","tag-react"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts\/277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/comments?post=277"}],"version-history":[{"count":0,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts\/277\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/media?parent=277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/categories?post=277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/tags?post=277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}