{"id":38165,"date":"2022-11-21T13:12:54","date_gmt":"2023-07-17T21:45:16","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/"},"modified":"2024-04-29T01:47:32","modified_gmt":"2024-04-28T17:47:32","slug":"%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/","title":{"rendered":"\u5728\u4f7f\u7528JS\u6846\u67b6React\u8fdb\u884c\u6570\u636e\u5904\u7406\u548c\u6c47\u603b\u7684\u7248\u672c"},"content":{"rendered":"<p>\u8fd9\u4e2a\u662f\u5c06\u524d\u4e00\u7bc7\u6587\u7ae0\u7684\u7eed\u4f5c\u6309\u7167\u5404\u81ea\u7684\u6846\u67b6\u8fdb\u884c\u5206\u7c7b\uff0c\u4ee5\u4fbf\u66f4\u5bb9\u6613\u5730\u8ffd\u8e2a\u65f6\u4ee3\u6f6e\u6d41\u7684\u53d8\u5316\u3002<\/p>\n<ul class=\"post-ul\">jQuery\u611b\u597d\u5bb6\u306e\u305f\u3081\u306eVue.js\u3001React\u3001Angular\u5165\u9580<\/ul>\n<p>\u6211\u5e0c\u671b\u8fd9\u6b21\u80fd\u591f\u8fdb\u884c\u66f4\u52a0\u6df1\u5165\u7684\u64cd\u4f5c\u8bf4\u660e\uff0c\u5305\u62ec\u4e0a\u6b21\u65e0\u6cd5\u5b8c\u6210\u7684\u7ec4\u4ef6\u90e8\u5206\u3002\u6b64\u5916\uff0c\u4e3a\u4e86\u63d0\u9ad8\u5b9e\u8df5\u80fd\u529b\uff0c\u6211\u4eec\u5c06\u4f7f\u7528\u670d\u52a1\u5668\u73af\u5883\u6765\u8fdb\u884c\u63a7\u5236\uff0c\u56e0\u6b64React\u5c06\u5728React Native\u4e2d\u8fdb\u884c\u63a7\u5236\u3002<\/p>\n<p>\u5c3d\u7ba1 React \u5728 18 \u7248\u8fdb\u884c\u4e86\u76f8\u5f53\u5927\u89c4\u6a21\u7684\u91cd\u5927\u66f4\u6539\uff0c\u4f46\u6211\u4eec\u76ee\u524d\u8fd8\u662f\u4ee5 React 17 \u6807\u51c6\u8fdb\u884c\u7f16\u5199\u3002<\/p>\n<p>\u7531\u4e8eReactNative\u5728\u7248\u672c16.8\uff08\u51fd\u6570\u7ec4\u4ef6\uff09\u4e0a\u7684\u91c7\u7528\u8f83\u665a\uff0c\u6240\u4ee5\u5728\u6b64\u4e4b\u524d\uff08\u7c7b\u7ec4\u4ef6\uff09\u7684\u8bb0\u6cd5\u6d41\u884c\u4e00\u6bb5\u65f6\u95f4\uff0c\u4f46\u52302023\u5e74\u4e3a\u6b62\uff0c\u7c7b\u7ec4\u4ef6\u5df2\u7ecf\u6210\u4e3a\u4e00\u79cd\u8fc7\u65f6\uff08\u5c11\u6570\u6d3e\uff09\u7684\u8bb0\u6cd5\uff0c\u56e0\u6b64\u672c\u6587\u5c06\u53ea\u89e3\u91ca\u51fd\u6570\u7ec4\u4ef6\u3002<\/p>\n<p>\u203b\u672c\u6b21\u5b66\u4e60\u7684\u5185\u5bb9\u662f<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\uff15\u7ae0\u3000\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5236\u5fa1\uff08\u96fb\u5353\uff09<\/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\">\uff16\u7ae0\u3000\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5236\u5fa1\uff08\u8cb7\u3044\u7269\u304b\u3054\uff09<\/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\">\uff17\u7ae0\u3000\u30b9\u30bf\u30a4\u30eb\u5236\u5fa1\uff08\u5199\u771f\u691c\u7d22\u30b7\u30b9\u30c6\u30e0\uff09<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\uff18\u7ae0\u3000TypeScript\uff08Todo\u30a2\u30d7\u30ea\uff09<\/ul>\n<p>\u662f\u7684\u3002<\/p>\n<p>\u53e6\u5916\uff0c\u6700\u8fd1React\u4e2d\u4f7f\u7528TypeScript\u7f16\u5199\u5df2\u6210\u4e3a\u4e3b\u6d41\uff0c\u4f46\u5728\u7b2c8\u7ae0\u4e4b\u524d\u6211\u4eec\u5e76\u672a\u6d89\u53ca\u5b83\uff08\u5982\u679c\u76f4\u63a5\u8fdb\u5165TypeScript\u800c\u6ca1\u6709\u638c\u63e1\u57fa\u7840\uff0c\u53ef\u80fd\u4f1a\u66f4\u52a0\u56f0\u60d1\uff09\u3002\u6211\u4eec\u5c06\u5728\u7b2c8\u7ae0\u7684\u7ec3\u4e60\u4e2d\u4ecb\u7ecdTypeScript\u3002<\/p>\n<p>\u6b64\u5916\uff0c\u5728\u672c\u6587\u4e2d\uff0c\u6211\u4eec\u5728\u7b2c\u516d\u7ae0\u4ecb\u7ecd\u4e86useContext\u94a9\u5b50\u3001useCallback\u94a9\u5b50\u548cuseReducer\u94a9\u5b50\uff0c\u5728\u7b2c\u4e03\u7ae0\u4ecb\u7ecd\u4e86useMemo\u94a9\u5b50\uff0c\u5728\u7b2c\u516b\u7ae0\u4ecb\u7ecd\u4e86useRef\u94a9\u5b50\u3002<\/p>\n<h1>\u5bfc\u5165\u8bed\u6cd5\u7684\u666e\u904d\u89c4\u5219<\/h1>\n<p>\u5728\u90a3\u4e4b\u524d\uff0c\u5e94\u8be5\u8981\u4e86\u89e3JavaScript\u7684import\u8bed\u6cd5\u7684\u89c4\u5219\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">A:import Fuga from &#8216;.\/Hoge&#8217;<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">B:import {Fuga} from &#8216;.\/Hoge&#8217;<\/ul>\n<p>\u4e0d\u4e86\u89e3\u4ee5\u4e0a\u4e24\u8005\u7684\u533a\u522b\u4f1a\u5bfc\u81f4\u4e4b\u540e\u51fa\u73b0\u8bb8\u591a\u9519\u8bef\u3002A\u7684\u610f\u601d\u662f\u5728\u5916\u90e8\u6587\u4ef6\u4e2d\u5b9a\u4e49\u4e00\u4e2a\u540d\u4e3aFuga\u7684Hoge\uff08\u901a\u5e38\u4e0e\u5bfc\u5165\u6587\u4ef6\u540d\u76f8\u540c\uff0c\u4e0d\u9700\u8981\u7279\u610f\u6539\u540d\uff09\u3002\u800cB\u7684\u610f\u601d\u662f\u4f7f\u7528\u5916\u90e8\u6587\u4ef6Hoge\u4e2d\u5b9a\u4e49\u7684\u540d\u4e3aFuga\u7684\u5bf9\u8c61\u3002\u6240\u4ee5\u4ee5React\u7684\u4f8b\u5b50\u6765\u8bf4\uff0c<\/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\">useEffect<\/span><span class=\"p\">,<\/span><span class=\"nx\">useContext<\/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<\/code><\/pre>\n<p>\u8fd9\u662f\u4e00\u4e2a\u547d\u4ee4\uff0c\u4f7f\u7528\u540d\u4e3aReact\u7684\u5916\u90e8\u6587\u4ef6\uff0c\u5e76\u5229\u7528useState\u3001useEffect\u548cuseContext\u5bf9\u8c61\u3002<\/p>\n<h1>\u7ec3\u4e605 \u7ec4\u4ef6\u63a7\u5236\uff08\u8ba1\u7b97\u5668\uff09<\/h1>\n<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u5c06\u4f7f\u7528React\u6765\u6784\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u7cfb\u7edf\uff0c\u4f7f\u7528\u5b50\u7ec4\u4ef6\u6765\u6784\u5efa\u7236\u7ec4\u4ef6\u3002\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u7b80\u6613\u8ba1\u7b97\u5668\u3002\u4e3a\u4e86\u5b9e\u73b0\u8fd9\u4e00\u76ee\u6807\uff0c\u6211\u4eec\u9700\u8981\u63a7\u5236\u6309\u94ae\u7684\u6309\u4e0b\u65f6\u673a\uff0c\u901a\u8fc7\u5c06\u6309\u94ae\u7ec4\u4ef6\u8f6c\u6362\u4e3a\u5b50\u7ec4\u4ef6\uff0c\u6211\u4eec\u53ef\u4ee5\u66f4\u9ad8\u6548\u5730\u6784\u5efa\u7cfb\u7edf\u3002<\/p>\n<p>\u5728\u8fd9\u4e4b\u524d\uff0c\u4e3a\u4ec0\u4e48\u8981\u5c06\u7236\u6bcd\u7ec4\u4ef6\u8fdb\u884c\u5206\u5272\u548c\u5206\u5c42\u5462\uff1f\u7b80\u5355\u6765\u8bf4\uff0c\u8fd9\u662f\u4e3a\u4e86\u907f\u514d\u5197\u957f\u7684\u63cf\u8ff0\u3002<\/p>\n<h3>\u25cf\u5b89\u88c5\u5e94\u7528\u7a0b\u5e8f<\/h3>\n<p>\u60a8\u53ef\u4ee5\u4f7f\u7528npx\u547d\u4ee4\u8fdb\u884cReact\u5e94\u7528\u7a0b\u5e8f\u7684\u5b89\u88c5\u3002\u9996\u5148\uff0c\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u76ee\u5f55\u6765\u521b\u5efa\u4efb\u4f55\u5e94\u7528\u7a0b\u5e8f\u6240\u9700\u7684\u65b0\u76ee\u5f55\uff08\u4e0eVue\u4e0d\u540c\uff0c\u5373\u4f7f\u8fdb\u884c\u8986\u76d6\u4e5f\u4e0d\u4f1a\u6709\u4efb\u4f55\u63d0\u793a\uff0c\u6240\u4ee5\u8bf7\u6ce8\u610f\uff09\u3002<\/p>\n<pre class=\"post-pre\"><code>html # mkdir \u4efb\u610f\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u540d\r\n<\/code><\/pre>\n<p>\u5728\u8fd9\u91cc\u9700\u8981\u6ce8\u610f\u7684\u662f\u4e0d\u8981\u5207\u6362\u5230\u4efb\u4f55\u5e94\u7528\u7a0b\u5e8f\u3002\u63a5\u4e0b\u6765\uff0c\u8bf7\u7ee7\u7eed\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\uff08\u9002\u7528\u4e8eRhel\u7cfb\u5217\uff09\u3002<\/p>\n<pre class=\"post-pre\"><code>html # npx create-react-app \u4efb\u610f\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u540d\r\n<\/code><\/pre>\n<p>\u5982\u679cnpx\u4e0d\u80fd\u6b63\u5e38\u5de5\u4f5c\uff0c\u8bf7\u53c2\u8003\u4ee5\u4e0b\u7684Qiita\u5185\u6587\u7ae0\u3002<\/p>\n<ul class=\"post-ul\">React: Create React App\u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u304c\u3064\u304f\u308c\u306a\u3044<\/ul>\n<h2>\u25cf\u7ec4\u4ef6\u7684\u57fa\u672c\u7ed3\u6784<\/h2>\n<p>React\u7ec4\u4ef6\u7684\u8c03\u7528\u5982\u4e0b\u6240\u793a\uff0cLayout.js\u662f\u57fa\u672c\u7684\u7ec4\u4ef6\u3002\u53ea\u9700\u8981\u5bfc\u5165\u6587\u4ef6\u548c\u7f16\u5199\u7ec4\u4ef6\u6807\u7b7e\uff0c\u6bd4Vue\u5c11\u4e00\u6b65\u3002<\/p>\n<p>\u203bLayout.js\u4e0eclient.js\u6709\u5173\u8054\u3002<\/p>\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=\"k\">import<\/span> <span class=\"nx\">ReactDOM<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-dom<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">Layout<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/components\/Layout<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">root<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">getElementById<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">app<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\r\n<span class=\"nx\">ReactDOM<\/span><span class=\"p\">.<\/span><span class=\"nf\">render<\/span><span class=\"p\">(<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Layout<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">,<\/span> <span class=\"nx\">root<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/\u3053\u306eLayout\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u547c\u3073\u51fa\u3057\u3066\u3044\u308b<\/span>\r\n<\/code><\/pre>\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=\"k\">import<\/span> <span class=\"nx\">Calc<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Calc<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u547c\u3073\u51fa\u3057<\/span>\r\n\r\n<span class=\"c1\">\/\/JSX\u5185\u306b\u30b1\u30d0\u30d6\u30b1\u30fc\u30b9\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8a18\u8ff0\u3059\u308b<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">Layout<\/span> <span class=\"kd\">extends<\/span> <span class=\"nc\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Component<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nf\">render<\/span><span class=\"p\">()<\/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\t  <span class=\"o\">&lt;<\/span><span class=\"nx\">Calc<\/span> <span class=\"o\">\/&gt;<\/span><span class=\"p\">{<\/span><span class=\"cm\">\/*\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8*\/<\/span><span class=\"p\">}<\/span>\r\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/&gt;   <\/span> \r\n    <span class=\"p\">);<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h4>\u25cf\u5728\u5c06\u4eb2\u5b50\u7ec4\u4ef6\u5199\u5165\u540c\u4e00\u6587\u4ef6\u65f6\u9700\u8981\u6ce8\u610f\u7684\u4e8b\u9879<\/h4>\n<p>\u5728React\u4e2d\uff0c\u5904\u7406\u5177\u6709\u7236\u5b50\u5173\u7cfb\u7684\u7ec4\u4ef6\u7ecf\u5e38\u5728\u540c\u4e00\u4e2a\u6587\u4ef6\u4e2d\u8fdb\u884c\u3002\u7136\u800c\uff0c\u5f53\u4f7f\u7528\u51fd\u6570\u7ec4\u4ef6\u6765\u63a7\u5236\u7236\u5b50\u7ec4\u4ef6\u65f6\uff0c\u53ea\u9700\u5c06\u9700\u8981\u88ab\u5916\u90e8\u8c03\u7528\u7684\u7236\u7ec4\u4ef6\u5bfc\u51fa\u4e3a&#8221;export default Parent&#8221;\u5373\u53ef\u3002\u5982\u679c\u4e0d\u5c0f\u5fc3\u5c06\u5b50\u7ec4\u4ef6\u4e5f\u5bfc\u51fa\u4e3a&#8221;export default Child&#8221;\uff0c\u53ef\u80fd\u4f1a\u5bfc\u81f4\u63a7\u5236\u9519\u8bef\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nx\">Const<\/span> <span class=\"nc\">Child<\/span><span class=\"p\">()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n  <span class=\"c1\">\/\/\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u5916\u90e8\u306b\u51fa\u529b\u3057\u306a\u3044\u306e\u3067\u3001\u305d\u306e\u307e\u307e\u8a18\u8ff0<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"nx\">Const<\/span> <span class=\"nc\">Parent<\/span><span class=\"p\">()<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n  <span class=\"c1\">\/\/\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u5916\u90e8\u306b\u51fa\u529b\u3059\u308b\u306e\u3067\u3001\u5f8c\u3067\u95a2\u6570\u3060\u3051\u3092\u8a18\u8ff0\u3059\u308b<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"nx\">deafault<\/span> <span class=\"nx\">Parent<\/span> <span class=\"c1\">\/\/\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u51fa\u529b\u3059\u308b<\/span>\r\n<\/code><\/pre>\n<h2>\u5728React\u4e2d\u63a7\u5236\u7ec4\u4ef6<\/h2>\n<p>React\u7684\u7ec4\u4ef6\u63a7\u5236\u6bd4\u5176\u4ed6JS\u6846\u67b6\u66f4\u5bb9\u6613\u7406\u89e3\u3002<\/p>\n<p>\u7136\u800c\uff0cReact\u6709\u4e00\u4e2a\u4e0e\u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u4f20\u9012\u503c\u7684emit\u65b9\u6cd5\u76f8\u5bf9\u5e94\u7684\u7279\u70b9\u662f\u4e0d\u5b58\u5728\u7684\u3002\u4f46\u662f\uff0c\u7531\u4e8e\u53ef\u4ee5\u4f20\u64ad\u5305\u62ec\u4e8b\u4ef6\u5728\u5185\u7684\u56de\u8c03\u51fd\u6570\uff0c\u6240\u4ee5\u53ef\u4ee5\u901a\u8fc7\u8ba9\u7236\u7ec4\u4ef6\u884c\u4e3a\u770b\u4f3c\u63a5\u6536\u5230\u4e8b\u4ef6\u7684\u65b9\u5f0f\u6765\u5b9e\u73b0\u503c\u7684\u540c\u6b65\u3002<\/p>\n<h4>\u4ece\u7236\u7ec4\u4ef6\u4f20\u9012\u503c\u5230\u5b50\u7ec4\u4ef6<\/h4>\n<p>\u53ea\u9700\u8981\u628a\u503c\u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u5728\u5b9a\u4e49\u51fd\u6570\u7684\u53c2\u6570\u4e2d\u5199\u4e0aprops\uff0c\u7136\u540e\u5b50\u7ec4\u4ef6\u5c31\u53ef\u4ee5\u4eceprops\u5bf9\u8c61\u4e2d\u83b7\u53d6\u503c\u3002\u800cprops\u662fproperties\u7684\u7f29\u5199\uff0c\u610f\u601d\u662f\u5c5e\u6027\u3001\u62e5\u6709\u7684\u610f\u601d\u3002\u4e5f\u5c31\u662f\u8bf4\uff0c\u5982\u679c\u5c06\u5176\u7406\u89e3\u4e3a\u7236\u7ec4\u4ef6\u62e5\u6709\u7684\u53d8\u91cf\uff0c\u90a3\u4e48\u53ef\u4ee5\u77e5\u9053\u5b50\u7ec4\u4ef6\u53ea\u662f\u5728\u5f15\u7528\u7236\u7ec4\u4ef6\u62e5\u6709\u7684\u53d8\u91cf\u3002<\/p>\n<h3>\u25cf\u5728React\u4e2d\u7f16\u5199\u7236\u7ec4\u4ef6<\/h3>\n<p>\u4e3a\u4e86\u89e3\u91ca\u7236\u5b50\u7ec4\u4ef6\u7684\u529f\u80fd\uff0c\u6211\u4eec\u5c06\u5177\u4f53\u5236\u4f5c\u4e00\u4e2a\u8ba1\u7b97\u5668\u3002\u8bf7\u6ce8\u610f\uff0c\u6587\u4ef6\u540d\u5982\u4e0b\u6240\u793a\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3000Calc.js<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3000Setkey.js \/\/\u30d7\u30c3\u30b7\u30e5\u30ad\u30fc<\/ul>\n<h4>\u25cf\u63a7\u5236\u4eb2\u7ec4\u4ef6<\/h4>\n<p>\u7236\u7ec4\u4ef6\u5982\u4e0b\u6240\u793a\u3002<\/p>\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=\"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_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\r\n\t<span class=\"kd\">const<\/span> <span class=\"nx\">state<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n\t\t<span class=\"na\">vals<\/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\t<span class=\"p\">],<\/span>\r\n    <span class=\"na\">lnum<\/span><span class=\"p\">:<\/span> <span class=\"kc\">null<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/\u88ab\u5e8f\u6570<\/span>\r\n    <span class=\"na\">cnum<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/\u5e8f\u6570<\/span>\r\n    <span class=\"na\">sum<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/\u5408\u8a08<\/span>\r\n    <span class=\"na\">sign<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/\u8a18\u53f7<\/span>\r\n    <span class=\"na\">str<\/span><span class=\"p\">:<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">,<\/span><span class=\"err\">\u3000<\/span><span class=\"c1\">\/\/\u6587\u5b57\u5217<\/span>\r\n\t<span class=\"p\">}<\/span>\r\n  <span class=\"c1\">\/\/\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u306e\u5024\u3092\u53d7\u3051\u53d6\u308b\u305f\u3081\u306e\u30e1\u30bd\u30c3\u30c9\uff08\u5f8c\u8ff0\uff09<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">onReceive<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">str<\/span><span class=\"p\">,<\/span><span class=\"nx\">sum<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n    <span class=\"nf\">setStr<\/span><span class=\"p\">(<\/span><span class=\"nx\">str<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"nf\">setSum<\/span><span class=\"p\">(<\/span><span class=\"nx\">sum<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  \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                <span class=\"p\">{<\/span><span class=\"cm\">\/*\u4ee5\u4e0b\u304c\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3078\u306e\u30ea\u30f3\u30af\u30bf\u30b0*\/<\/span><span class=\"p\">}<\/span>\r\n\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">Setkey<\/span> <span class=\"nx\">state<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">state<\/span><span class=\"p\">}<\/span> <span class=\"nx\">onReceiveState<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">c<\/span><span class=\"p\">,<\/span><span class=\"nx\">s<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span><span class=\"nf\">onReceive<\/span><span class=\"p\">(<\/span><span class=\"nx\">c<\/span><span class=\"p\">,<\/span><span class=\"nx\">s<\/span><span class=\"p\">)}}<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n\t\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\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\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<p>\u9019\u662f\u9019\u6a23\u7684\u63cf\u8ff0\u3002<\/p>\n<h3>\u25cf\u8fde\u63a5\u5b50\u7ec4\u4ef6<\/h3>\n<p>\u8981\u5c06\u7236\u7ec4\u4ef6\u4e0e\u5b50\u7ec4\u4ef6\u8fdb\u884c\u5173\u8054\uff0c\u53ef\u4ee5\u5728JSX\u4e2d\u7f16\u5199\u7ec4\u4ef6\uff0c\u5e76\u901a\u8fc7\u5b9a\u4e49\u7ec4\u4ef6\u6587\u4ef6\u6765\u6784\u9020\u7236\u5b50\u5173\u7cfb\u7684\u7ec4\u4ef6\u3002<\/p>\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=\"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> <span class=\"c1\">\/\/\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30d5\u30a1\u30a4\u30eb\u306e\u547c\u51fa<\/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   <span class=\"c1\">\/\/\u4e2d\u7565<\/span>\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                <span class=\"p\">{<\/span><span class=\"cm\">\/*\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8*\/<\/span><span class=\"p\">}<\/span>\r\n\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">Setkey<\/span> <span class=\"nx\">state<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">state<\/span><span class=\"p\">}<\/span> <span class=\"nx\">onReceiveState<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">c<\/span><span class=\"p\">,<\/span><span class=\"nx\">s<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span><span class=\"nf\">onReceive<\/span><span class=\"p\">(<\/span><span class=\"nx\">c<\/span><span class=\"p\">,<\/span><span class=\"nx\">s<\/span><span class=\"p\">)}}<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n\t\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\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\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<h3>\u25cf \u5b50\u7ec4\u4ef6\u7684\u63a7\u5236<\/h3>\n<p>\u5b50\u7ec4\u4ef6\u5982\u4e0b\u6240\u793a\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\">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=\"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  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">state<\/span><span class=\"p\">,<\/span><span class=\"nx\">onReceiveState<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">props<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">d_vals<\/span><span class=\"p\">,<\/span><span class=\"nx\">setVals<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">([])<\/span>\r\n  <span class=\"c1\">\/\/\u5c55\u958b\u76f4\u5f8c\u306e\u5909\u6570\u51e6\u7406<\/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=\"kd\">const<\/span> <span class=\"nx\">vals<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"na\">lnum<\/span><span class=\"p\">:<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">lnum<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">cnum<\/span><span class=\"p\">:<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">cnum<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">sum<\/span><span class=\"p\">:<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">sum<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">sign<\/span><span class=\"p\">:<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">sign<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">str<\/span><span class=\"p\">:<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">str<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"p\">}<\/span>\r\n    <span class=\"nf\">setVals<\/span><span class=\"p\">(<\/span><span class=\"nx\">vals<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">},[])<\/span>\r\n    <span class=\"c1\">\/\/\u30d7\u30c3\u30b7\u30e5\u30ad\u30fc\u306e\u30a4\u30d9\u30f3\u30c8\u30e1\u30bd\u30c3\u30c9<\/span>\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_vals<\/span><span class=\"p\">.<\/span><span class=\"nx\">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_vals<\/span><span class=\"p\">.<\/span><span class=\"nx\">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_vals<\/span><span class=\"p\">.<\/span><span class=\"nx\">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_vals<\/span><span class=\"p\">.<\/span><span class=\"nx\">sign<\/span>\r\n\t\t<span class=\"kd\">let<\/span> <span class=\"nx\">str<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">d_vals<\/span><span class=\"p\">.<\/span><span class=\"nx\">str<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">strtmp<\/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=\"kc\">null<\/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        <span class=\"nx\">d_vals<\/span><span class=\"p\">.<\/span><span class=\"nx\">lnum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">lnum<\/span>\r\n        <span class=\"nx\">d_vals<\/span><span class=\"p\">.<\/span><span class=\"nx\">cnum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">cnum<\/span>\r\n        <span class=\"nx\">d_vals<\/span><span class=\"p\">.<\/span><span class=\"nx\">sum<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">sum<\/span>\r\n        <span class=\"nx\">d_vals<\/span><span class=\"p\">.<\/span><span class=\"nx\">sign<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">sign<\/span>\r\n        <span class=\"nx\">d_vals<\/span><span class=\"p\">.<\/span><span class=\"nx\">str<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">str<\/span>\r\n        <span class=\"nf\">setVals<\/span><span class=\"p\">(<\/span><span class=\"nx\">d_vals<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/\u5909\u6570\u306e\u540c\u671f\u7528<\/span>\r\n        <span class=\"nf\">onReceiveState<\/span><span class=\"p\">(<\/span><span class=\"nx\">str<\/span><span class=\"p\">,<\/span><span class=\"nx\">sum<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u5909\u6570\u3092\u8ee2\u9001<\/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  <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\">state<\/span><span class=\"p\">.<\/span><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>\r\n\t\t\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Fragment<\/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=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t\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=\"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=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"p\">{<\/span><span class=\"nx\">v<\/span><span class=\"p\">[<\/span><span class=\"mi\">1<\/span><span class=\"p\">]}<\/span>\r\n\t\t\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\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/React.Fragment<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t\t\t\t<span class=\"p\">)<\/span>\r\n\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<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\">Setkey<\/span>\r\n<\/code><\/pre>\n<h3>\u25cf\u4ece\u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u503c<\/h3>\n<p>\u8981\u5c06\u503c\u4ece\u7236\u7ec4\u4ef6\u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\uff0c\u9700\u8981\u6309\u7167\u4ee5\u4e0b\u65b9\u5f0f\u7f16\u5199\u4ee3\u7801\uff0c\u5e76\u5728\u53f3\u4fa7\u7684\u5bf9\u8c61\u6587\u5b57\u4e2d\u63cf\u8ff0\u8981\u4f20\u9012\u7684\u53d8\u91cf\uff0c\u5728\u5de6\u4fa7\u7684\u56de\u8c03\u51fd\u6570\u4e2d\u4fdd\u5b58\u3002<\/p>\n<p>&lt;\u5b50\u7ec4\u4ef6\u56de\u8c03\u51fd\u6570={\u8981\u4f20\u9012\u7ed9\u5b50\u7ec4\u4ef6\u7684\u53d8\u91cf} \/&gt;<\/p>\n<p>\u5177\u4f53\u6765\u8bf4\uff0c\u4ee5\u4e0b\u662f\u76f8\u5173\u90e8\u5206\u3002<\/p>\n<pre class=\"post-pre\"><code>\tconst states = {\r\n\t\tvals:[\r\n\t\t\t[['7','7'],['8','8'],['9','9'],['div','\u00f7']],\r\n\t\t\t[['4','4'],['5','5'],['6','6'],['mul','\u00d7']],\r\n\t\t\t[['1','1'],['2','2'],['3','3'],['sub','-']],\r\n\t\t\t[['0','0'],['eq','='],['c','C'],['add','+']],\r\n\t\t],\r\n        lnum: null, \/\/\u88ab\u5e8f\u6570\r\n        cnum: 0, \/\/\u5e8f\u6570\r\n        sum: 0, \/\/\u5408\u8a08\r\n        sign: \"\", \/\/\u8a18\u53f7\r\n        str:\"\",\u3000\/\/\u6587\u5b57\u5217\r\n\t}\r\n\treturn (\r\n\t\t\t&lt;&gt;\r\n                {\/*\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30ea\u30c6\u30e9\u30eb\u5185\u306b\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u4e0a\u306b\u7528\u610f\u3055\u308c\u305f\u5909\u6570states*\/}\r\n\t\t\t\t&lt;Setkey state={states}  \/&gt;\r\n\t\t    &lt;\/&gt;\r\n\t)\r\n<\/code><\/pre>\n<h3>\u25cf\u5b50\u7ec4\u4ef6\u63a5\u6536\u7236\u7ec4\u4ef6\u7684\u53d8\u91cf\u503c<\/h3>\n<p>\u8fd9\u4e2a\u53d8\u91cf\u5728\u5b50\u7ec4\u4ef6\u4e2d\u4f1a\u6309\u4ee5\u4e0b\u65b9\u5f0f\u63a5\u6536\u3002\u5c06props\u5c5e\u6027\u8d4b\u503c\u7ed9\u7ec4\u4ef6\u7684\u53c2\u6570\uff0c\u5e76\u5c06\u5176\u5c55\u5f00\u5982\u4e0b\u3002\u4f7f\u7528useEffect\u94a9\u5b50\u6765\u5904\u7406\u5c55\u5f00\u7684\u503c\uff0c\u5e76\u4f7f\u7528useState\u94a9\u5b50\u5c55\u5f00\u5230vals\u4e2d\uff0c\u5c31\u53ef\u4ee5\u5c55\u5f00\u63a8\u9001\u952e\u3002<\/p>\n<pre class=\"post-pre\"><code><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\">state<\/span><span class=\"p\">,<\/span><span class=\"nx\">onReceiveState<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">props<\/span> <span class=\"c1\">\/\/\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u306e\u5024<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">d_vals<\/span><span class=\"p\">,<\/span><span class=\"nx\">setVals<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">([])<\/span> <span class=\"c1\">\/\/\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u4e0a\u3067\u306e\u5909\u6570\u8a2d\u5b9a<\/span>\r\n<span class=\"err\">\u3000<\/span><span class=\"c1\">\/\/\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u53d7\u3051\u53d6\u3063\u305f\u5024\u3092\u51e6\u7406\u3059\u308b<\/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=\"kd\">const<\/span> <span class=\"nx\">vals<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"na\">lnum<\/span><span class=\"p\">:<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">lnum<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">cnum<\/span><span class=\"p\">:<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">cnum<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">sum<\/span><span class=\"p\">:<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">sum<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">sign<\/span><span class=\"p\">:<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">sign<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">str<\/span><span class=\"p\">:<\/span> <span class=\"nx\">state<\/span><span class=\"p\">.<\/span><span class=\"nx\">str<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"p\">}<\/span>\r\n    <span class=\"nf\">setVals<\/span><span class=\"p\">(<\/span><span class=\"nx\">vals<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">},[])<\/span>\r\n<span class=\"err\">\u3000<\/span><span class=\"c1\">\/\/\u4e2d\u7565<\/span>\r\n  <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\">state<\/span><span class=\"p\">.<\/span><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>\r\n\t\t\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Fragment<\/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=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t\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=\"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=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"p\">{<\/span><span class=\"nx\">v<\/span><span class=\"p\">[<\/span><span class=\"mi\">1<\/span><span class=\"p\">]}<\/span>\r\n\t\t\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\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/React.Fragment<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t\t\t\t<span class=\"p\">)<\/span>\r\n\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<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\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Setkey<\/span>\r\n<\/code><\/pre>\n<h3>\u4ece\u5b50\u7ec4\u4ef6\u5411\u7236\u7ec4\u4ef6\u4f20\u9012\u6570\u636e<\/h3>\n<p>\u5982\u679c\u8981\u5c06\u6570\u636e\u4ece\u5b50\u7ec4\u4ef6\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\uff0c\u60a8\u53ef\u4ee5\u5728\u5b50\u7ec4\u4ef6\u7684\u65b9\u6cd5\u4e2d\u51c6\u5907\u53c2\u6570\uff0c\u5e76\u5728\u6267\u884c\u7236\u7ec4\u4ef6\u63d0\u4f9b\u7684\u56de\u8c03\u51fd\u6570\u65f6\uff0c\u53ef\u4ee5\u4ece\u5185\u8054\u51fd\u6570\u7684\u53c2\u6570\u4e2d\u53d6\u51fa\u503c\u3002<\/p>\n<p>\u5177\u4f53\u800c\u8a00\uff0c\u8fd9\u91cc\u7684\u7236\u7ec4\u4ef6\u4e2d\u7684\u53d8\u91cffuga \u5c31\u662f\u5b50\u7ec4\u4ef6\u4e2d\u63d0\u4f9b\u7684\u56de\u8c03\u51fd\u6570getCharState \u7684\u53d8\u91cfhoge\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u5b50 : getHogeState(hoge) \/\/\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u306b\u5f15\u6570\u3092\u30bb\u30c3\u30c8<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u89aa : getHogestate = { (fuga)=&gt;getHoge(fuga)} \/\/\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u306b\u7528\u610f\u3055\u308c\u305f\u30a4\u30f3\u30e9\u30a4\u30f3\u95a2\u6570\u306e\u5f15\u6570\u304b\u3089\u5909\u6570hoge\u3092\u53d6\u308a\u51fa\u3057\u3001\u305d\u308c\u3092\u30e1\u30bd\u30c3\u30c9\u3067\u5b9f\u884c\u3002<\/ul>\n<p>&lt;\u5b50\u7ec4\u4ef6\u7684\u94fe\u63a5\u6807\u7b7e \u5b50\u7ec4\u4ef6\u5230\u56de\u8c03\u51fd\u6570=&gt;{(\u901a\u8fc7\u5b50\u7ec4\u4ef6\u8c03\u7528\u7684\u53d8\u91cf\u300afC\u300b=&gt;\u7236\u7ec4\u4ef6\u4e0a\u7684\u5904\u7406\u65b9\u6cd5(\u7236\u7ec4\u4ef6\u60f3\u8981\u5904\u7406\u7684\u53d8\u91cf\u300afP\u300b)}} \/&gt;<\/p>\n<p>\u6240\u4ee5\uff0c\u5982\u679c\u5c06fC\u8bbe\u7f6e\u4e3afp\uff0c\u5c31\u53ef\u4ee5\u76f4\u63a5\u5c06\u5b50\u7ec4\u4ef6\u7684\u503c\u4f20\u9012\u7ed9\u7236\u7ec4\u4ef6\u3002\u5177\u4f53\u6765\u8bf4\uff0c\u4ee5\u4e0b\u662f\u5b50\u7ec4\u4ef6\u4e2d\u7684<\/p>\n<p>&lt;\u5728\u63a5\u6536\u72b6\u6001\u4e2d\u8bbe\u7f6e\u5bc6\u94a5=&gt;{(c,s)=&gt;{\u5f53\u63a5\u6536\u5230(c,s)\u65f6\u6267\u884conReceive}} \/&gt;<\/p>\n<p>\u8fd9\u662f\u53d8\u91cfc\u548c\u53d8\u91cfs\u7684\u90e8\u5206\u3002<\/p>\n<pre class=\"post-pre\"><code>  <span class=\"c1\">\/\/\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u53d7\u3051\u53d6\u3063\u305f\u5024\u3092\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u5c55\u958b<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nx\">onReceive<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">str<\/span><span class=\"p\">,<\/span><span class=\"nx\">sum<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span>\r\n    <span class=\"nf\">setStr<\/span><span class=\"p\">(<\/span><span class=\"nx\">str<\/span><span class=\"p\">)<\/span>\r\n    <span class=\"nf\">setSum<\/span><span class=\"p\">(<\/span><span class=\"nx\">sum<\/span><span class=\"p\">)<\/span>\r\n  <span class=\"p\">}<\/span>\r\n  \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\t<span class=\"o\">&lt;<\/span><span class=\"nx\">Setkey<\/span> <span class=\"nx\">state<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">states<\/span><span class=\"p\">}<\/span> <span class=\"nx\">onReceiveState<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">c<\/span><span class=\"p\">,<\/span><span class=\"nx\">s<\/span><span class=\"p\">)<\/span><span class=\"o\">=&gt;<\/span><span class=\"p\">{<\/span><span class=\"nf\">onReceive<\/span><span class=\"p\">(<\/span><span class=\"nx\">c<\/span><span class=\"p\">,<\/span><span class=\"nx\">s<\/span><span class=\"p\">)}}<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span><span class=\"o\">&gt;<\/span>\r\n\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">\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\t<span class=\"o\">&lt;<\/span><span class=\"nx\">p<\/span><span class=\"o\">&gt;<\/span><span class=\"nx\">\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\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<\/code><\/pre>\n<pre class=\"post-pre\"><code>  <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\">state<\/span><span class=\"p\">.<\/span><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>\r\n\t\t\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Fragment<\/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=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t\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=\"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=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"p\">{<\/span><span class=\"nx\">v<\/span><span class=\"p\">[<\/span><span class=\"mi\">1<\/span><span class=\"p\">]}<\/span>\r\n\t\t\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\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/React.Fragment<\/span><span class=\"err\">&gt;\r\n<\/span>\t\t\t\t\t\t\t\t<span class=\"p\">)<\/span>\r\n\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<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<\/code><\/pre>\n<h4>\u25cf\u5d4c\u5165JSX\u7684\u89c4\u5219<\/h4>\n<p>\u5f53\u4f7f\u7528React\u5faa\u73af\u65f6\uff0c\u5982\u4e4b\u524d\u6240\u63d0\u5230\u7684\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528**Array.prototype.map(item,key)**\uff0c\u4f46\u662f\u4e5f\u53ef\u4ee5\u50cf\u8fd9\u6b21\u4e00\u6837\u4f7f\u7528\u53cc\u91cd\u5faa\u73af\u3002\u4e0d\u8fc7\uff0c\u5982\u679c\u4e0d\u597d\u597d\u6574\u7406\u601d\u8def\uff0c\u5f88\u5bb9\u6613\u53d8\u5f97\u6df7\u4e71\u3002\u56e0\u6b64\uff0c\u6211\u5c06\u89e3\u91ca\u5176\u4e2d\u8981\u6ce8\u610f\u7684\u8981\u70b9\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u5909\u6570\u3001\u30e1\u30bd\u30c3\u30c9\u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30ea\u30c6\u30e9\u30eb{}\u3067\u56f2\u3080<\/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\">return\u3067\u8fd4\u305b\u308b\u30bf\u30b0\u306f\u5358\u4e00\u306e\u30a8\u30ec\u30e1\u30f3\u30c8\u3067\u3001return\u3067\u8fd4\u3059\u30bf\u30b0\u306f()\u3067\u56f2\u3080<\/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\">\u8907\u6570\u306e\u30bf\u30b0\u3092\u8fd4\u3057\u305f\u3044\u5834\u5408\u3067div\u30bf\u30b0\u3092\u7528\u3044\u305f\u304f\u306a\u3044\u5834\u5408\u306f\u3001\u7a7a\u30bf\u30b0&lt;&gt;\u304b\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3067\u304d\u308b\u7a7a\u30bf\u30b0\u30bf\u30b0\u306e\u3044\u305a\u308c\u304b\u3092\u7528\u3044\u308b\u3068\u3088\u3044\u3002<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">map\u30e1\u30bd\u30c3\u30c9\u3067\u30eb\u30fc\u30d7\u3055\u305b\u308b\u5834\u5408\u306fkey\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3059\u308b\uff08\u30e6\u30cb\u30fc\u30af\u306akey\u3092\u4ed8\u4e0e\u3057\u306a\u3044\u3068\u8b66\u544a\u304c\u51fa\u308b\uff09<\/ul>\n<p>\u5f53\u4f60\u638c\u63e1\u4e86\u8fd9\u56db\u9879\u89c4\u5219<\/p>\n<pre class=\"post-pre\"><code>   <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n        <span class=\"o\">&lt;&gt;<\/span>\r\n            <span class=\"p\">{<\/span><span class=\"nx\">state<\/span><span class=\"p\">.<\/span><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                <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\r\n                    <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                    <span class=\"p\">{<\/span>\r\n                        <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                            <span class=\"k\">return<\/span><span class=\"p\">(<\/span>\r\n\t\t\t\t\t\t\t\t<span class=\"o\">&lt;<\/span><span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">Fragment<\/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=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t\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=\"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=\"o\">&gt;<\/span>\r\n\t\t\t\t\t\t\t\t\t<span class=\"p\">{<\/span><span class=\"nx\">v<\/span><span class=\"p\">[<\/span><span class=\"mi\">1<\/span><span class=\"p\">]}<\/span>\r\n\t\t\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\t\t\t<span class=\"o\">&lt;<\/span><span class=\"sr\">\/React.Fragment<\/span><span class=\"err\">&gt;\r\n<\/span>                            <span class=\"p\">)<\/span>\r\n                        <span class=\"p\">})<\/span>\r\n                    <span class=\"p\">}<\/span>\r\n                    <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\t\t\t<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<\/code><\/pre>\n<p>\u6211\u60f3\u4f60\u53ef\u80fd\u80fd\u591f\u7406\u89e3\u8fd9\u4e2a\u63cf\u8ff0\u3002\u9996\u5148\uff0c\u6574\u4e2a\u63cf\u8ff0\u88ab\u7a7a\u6807\u7b7e&lt;&gt;\u6240\u5305\u56f4\uff0c\u5e76\u4e14\u5faa\u73af\u90e8\u5206\u7531\u65b9\u6cd5\u7ec4\u6210\uff0c\u6240\u4ee5\u7528\u5bf9\u8c61\u5b57\u9762\u91cf{}\u8fdb\u884c\u4e86\u5305\u56f4\u3002\u5bf9\u8c61\u5b57\u9762\u91cf\u4e2d\u7684\u5185\u5bb9\u9700\u8981\u6309\u7167\u6bcf\u5217\u56db\u4e2a\u7ec4\u7ec7\u63a8\u9001\u952e\u3002<\/p>\n<div>\n<p>\u30bf\u30b0\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002\u307e\u305f\u3001\u3053\u306e<\/p>\n<div>\u30bf\u30b0\u306e\u4e2d\u8eab\u306b\u306f\u4e8c\u91cd\u30eb\u30fc\u30d7\u7528\u306emap\u30e1\u30bd\u30c3\u30c9\u3092\u57cb\u3081\u8fbc\u3093\u3067\u3044\u308b\u306e\u3067\u3001\u3084\u306f\u308a\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30ea\u30c6\u30e9\u30eb{}\u3067\u56f2\u3080\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<br \/>\n\u305d\u306eval.map\u30e1\u30bd\u30c3\u30c9\u306e\u4e2d\u8eab\u306b\u3042\u308b\u306e\u306fbutton\u30bf\u30b0\u3067\u3059\u304c\u3001\u3053\u308c\u306f\uff14\u884c\u5206\u5b9f\u884c\u3055\u308c\u308b\u305f\u3081\u3001\u305d\u306e\u307e\u307e\u3060\u3068\u5358\u4e00\u30a8\u30ec\u30e1\u30f3\u30c8\u3092\u8fd4\u3059\u30eb\u30fc\u30eb\u3092\u6301\u3064JSX\u306e\u8a18\u8ff0\u9055\u53cd\u306b\u306a\u308a\u3001\u30a8\u30e9\u30fc\u3068\u306a\u308a\u307e\u3059\u3002\u305d\u3053\u3067\u65b9\u6cd5\u3068\u3057\u3066&lt;&gt;\u3082\u8003\u3048\u3089\u308c\u308b\u306e\u3067\u3059\u304c\u3001\u7a7a\u30bf\u30b0&lt;&gt;\u306f\u30d7\u30ed\u30d1\u30c6\u30a3\u8a2d\u5b9a\u3067\u304d\u306a\u3044\u305f\u3081\u3001key\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u8a2d\u5b9a\u304c\u3067\u304d\u305a\u3001\u4ee5\u4e0b\u306e\u8b66\u544a\u304c\u8868\u793a\u3055\u308c\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002Each child in a list should have a unique &#8220;key&#8221; prop<\/p>\n<p>\u3067\u3059\u304c\u3001\u4eca\u56de\u306f\u5225\u306b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u64cd\u4f5c\u3057\u306a\u3044\u306e\u3067key\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u91cd\u8981\u8996\u3055\u308c\u307e\u305b\u3093\u3002\u305d\u3053\u3067\u3001\u4ee3\u308f\u308a\u306b\u30bf\u30b0\u3092\u7528\u3044\u308b\u3068\u3001\u30d7\u30ed\u30d1\u30c6\u30a3\u3082\u8a2d\u5b9a\u3067\u304d\u308b\u306e\u3067\u3001key\u30bf\u30b0\u3092\u4fbf\u5b9c\u4e0a\u8a2d\u7f6e\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\nGitHub\u30d5\u30a9\u30fc\u30e9\u30e0\u5185\u306e\u8b70\u984c<\/p>\n<p>Unable to eliminate &#8216;Each child in a list should have a unique &#8220;key&#8221; prop&#8217; warning<\/p>\n<p>\u25cfuseState\u3092\u4f7f\u7528\u3059\u308b\u969b\u306e\u6ce8\u610f<br \/>\n\u3053\u3053\u3082\u304b\u306a\u308a\u5f15\u3063\u304b\u304b\u308a\u304c\u3061\u3067\u3059\u304c\u3001useState\u30d5\u30c3\u30af\u3067\u30d0\u30a4\u30f3\u30c9\u3057\u3066\u3044\u308b\u5909\u6570\u306f\u53c2\u7167\u3057\u304b\u3067\u304d\u306a\u3044\u4e0a\u306b\u3001\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u81ea\u7531\u81ea\u5728\u306b\u30e1\u30bd\u30c3\u30c9\u5185\u3067\u5909\u6570\u3092\u6271\u3048\u308b(\u30af\u30e9\u30b9\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u3088\u3046\u306b\u3001\u9010\u4e00\u5916\u90e8\u304b\u3089\u547c\u3073\u51fa\u3059\u5fc5\u8981\u304c\u306a\u3044)\u305f\u3081\u3001\u540c\u4e00\u306e\u5909\u6570\u540d\u3060\u3068read-only\u30a8\u30e9\u30fc\u306b\u5f15\u3063\u304b\u304b\u308b\u305f\u3081\u3067\u3059\u3002\u305d\u306e\u305f\u3081\u3001\u30d0\u30a4\u30f3\u30c9\u7528\u306e\u95a2\u6570\u306f\u3068\u308a\u3042\u3048\u305ad_hoge\u3068\u3057\u3066\u3001\u30e1\u30bd\u30c3\u30c9\u5185\u306e\u95a2\u6570\u306fhoge\u3068\u3057\u3066\u3044\u307e\u3059\u3002\u306a\u304a\u3001JSX\u306f\u30e1\u30bd\u30c3\u30c9\u306e\u5916\u5074\u306a\u306e\u3067d_hoge\u3067\u306a\u3044\u3068\u5024\u3092\u53d6\u5f97\u3067\u304d\u306a\u3044\u306e\u3067\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u6f14\u7fd2\uff15\u306e\u307e\u3068\u3081<br \/>\n\u3053\u306e\u3088\u3046\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5206\u5272\u306e\u76ee\u7684\u306f\u5197\u9577\u306a\u30a8\u30ec\u30e1\u30f3\u30c8\u3092\u96c6\u7d04\u3057\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u5316\u3059\u308b\u3053\u3068\u3067\u7121\u99c4\u306a\u8a18\u8ff0\u3092\u56de\u907f\u3059\u308b\u305f\u3081\u3067\u3059\u3002\u307e\u305f\u3001\u305d\u308c\u306b\u3042\u305f\u3063\u3066\u5909\u6570\u306e\u53d7\u3051\u6e21\u3057\u306e\u51e6\u7406\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u8981\u7d04\u3059\u308b\u3068\u3053\u3046\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u540c\u4e00\u30d5\u30a1\u30a4\u30eb\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u8907\u6570\u3042\u3063\u3066\u3082\u554f\u984c\u306a\u3044\u3002\u307e\u305f\u3001\u305d\u306e\u5834\u5408export\u3057\u3066\u826f\u3044\u306e\u306f\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3060\u3051\u3002<br \/>\n\u89aa\u304b\u3089\u5b50\u3078\u306e\u5024\u306e\u53d7\u3051\u6e21\u3057\u306fprops\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a2d\u5b9a\u3057\u3001\u30d7\u30ed\u30c8\u30bf\u30a4\u30d7\u304b\u3089\u53d7\u3051\u53d6\u308b\u3002<\/p>\n<p>\u5b50\u304b\u3089\u89aa\u3078\u306e\u53d7\u3051\u6e21\u3057\u306f\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u7528\u3044\u308b\u3002\u51e6\u7406\u306e\u540c\u671f\u3092\u3068\u308b\u306b\u306f\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u3092\u53d7\u3051\u6e21\u3059\u3002<br \/>\n\u5b50\u304b\u3089\u89aa\u3078\u306e\u5024\u306e\u53d7\u3051\u6e21\u3057\u306f\u3001\u5b50\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u306b\u5f15\u6570\u3092\u4ee3\u5165\u3057\u3001\u89aa\u306e\u30a4\u30f3\u30e9\u30a4\u30f3\u95a2\u6570\u306e\u5f15\u6570\u304b\u3089\u53d7\u3051\u53d6\u308b\u3002<\/p>\n<p>\u6f14\u7fd2\uff16 \u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\uff08\u8cb7\u3044\u7269\u304b\u3054\uff09<br \/>\n\u4eca\u307e\u3067\u306f\u89aa\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8aac\u660e\u306f\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u3042\u304f\u307e\u3067\u5358\u4e00\u306e\u30da\u30fc\u30b8\u306e\u307f\u306e\u5236\u5fa1\u3067\u3057\u305f\u3002\u3067\u3059\u304c\u3001\u4e16\u306e\u4e2d\u306eWEB\u30da\u30fc\u30b8\u3084\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u8907\u6570\u306e\u30da\u30fc\u30b8\u3092\u81ea\u5728\u306b\u884c\u304d\u6765\u3067\u304d\u307e\u3059\u3002\u305d\u308c\u3092\u5236\u5fa1\u3057\u3066\u3044\u308b\u306e\u304c\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u3044\u3046\u6a5f\u80fd\u3067\u3059\u3002<br \/>\n\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306b\u304a\u3051\u308b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u306f\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u3088\u3046\u306b\u57fa\u672c\u3068\u306a\u308b\u30ea\u30f3\u30af\u5143\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u3042\u3063\u3066\u3001\u30d1\u30b9\u306e\u6307\u5b9a\u306b\u3088\u3063\u3066\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5207\u66ff\u3067\u304d\u308b\u3068\u3044\u3046\u3082\u306e\u3067\u3059\u3002\u3082\u3063\u3068\u5c02\u9580\u7684\u306a\u8a00\u8449\u3092\u7528\u3044\u308c\u3070\u3001SPA\uff08SINGLE PAGE APPLICATION\uff09\u3068\u3044\u3046\u3082\u306e\u306b\u5bfe\u3057\u3001URI\u3092\u632f\u308a\u5206\u3051\u3066\u5404\u7a2e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30d5\u30a1\u30a4\u30eb\u306b\u3088\u3063\u3066\u7d10\u4ed8\u3051\u3089\u308c\u305f\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u8868\u793a\u3059\u308b\u3068\u3044\u3046\u3082\u306e\u3067\u3059\u3002<br \/>\n\u305d\u3057\u3066React\u3067\u306freact-router-dom\u3068\u3044\u3046\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u5fc5\u9808\u3068\u306a\u308a\u307e\u3059\u3002\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306b\u30ea\u30f3\u30af\u30bf\u30b0\u3068\u30ea\u30f3\u30af\u5148\u3092\u8868\u793a\u3059\u308b\u30bf\u30b0\u304c\u5b58\u5728\u3057\u3001to\u3068\u3044\u3046\u30d1\u30b9\u8a18\u8ff0\u7528\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u5b58\u5728\u3057\u3066\u3044\u307e\u3059\uff08react-router-dom6\u306fto\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u5ec3\u6b62\u3055\u308c\u3001component\u3068\u3044\u3046\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u5b9f\u88c5\uff09\u3002<br \/>\n\u307e\u305f\u3001\u30c7\u30fc\u30bf\u8ee2\u9001\u7528\u3001\u30c7\u30fc\u30bf\u53d7\u53d6\u7528\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u7528\u610f\u3055\u308c\u3066\u304a\u308a\u3001\u305d\u308c\u3089\u3092\u53d7\u3051\u6e21\u3057\u3068\u53d7\u3051\u53d6\u308a\u3001\u305d\u3057\u3066\u66f4\u65b0\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u5b9f\u884c\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u25cfReact\u3067\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5236\u5fa1\u3059\u308b<br \/>\nreact\u3067\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5236\u5fa1\u3092\u3059\u308b\u306b\u306freact-router-dom\u3068\u3044\u3046\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u5fc5\u9808\u3068\u306a\u308a\u307e\u3059\u3002\u4e8b\u524d\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002React\u306e\u5834\u5408\u306f\u3053\u308c\u3092import\u3059\u308b\u3060\u3051\u3067\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u304c\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u5143\u306b\u3057\u305f\u30d7\u30ed\u30b0\u30e9\u30e0(codesandbox)<br \/>\nReact Hooks and Context Shopping Cart<\/p>\n<p>#npm install react-router-dom<\/p>\n<p>\u25cfReact\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u4ed5\u7d44\u307f<br \/>\nReact\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u4ed5\u7d44\u307f\u306f\u3001\u305d\u308c\u305e\u308c\u306e\u30ea\u30f3\u30af\u30bf\u30b0\u306b\u5bfe\u3057\u3001\u30ea\u30f3\u30af\u306e\u8868\u793a\u5148\u3092Route\u30bf\u30b0\u3067\u8868\u793a\u3059\u308b\u3068\u3044\u3046\u3082\u306e\u3067\u3059\u3002\u306a\u306e\u3067\u3001\u8868\u793a\u5148\u3092\u30b7\u30a7\u30a2\u3059\u308b\u95a2\u4fc2\u306b\u3042\u308b\u306e\u3067\u3001Switch\uff08vue-route-dom6\u306fRouter\uff09\u3068\u3044\u3046\u30bf\u30b0\u3067\u8868\u793a\u3092\u5207\u63db\u5236\u5fa1\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\nReact\u306e\u5834\u5408\u306e\u30c7\u30fc\u30bf\u69cb\u9020<br \/>\n\u25a0component<br \/>\n&#8211; \u25a0css\uff08\u30c7\u30b6\u30a4\u30f3\u5236\u5fa1\u7528\u3001\u8868\u793a\u306f\u5272\u611b\uff09<br \/>\n&#8211; \u25a0pages<br \/>\n&#8211; MainNavigation.js \/\/\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff08\u30ca\u30d3\u90e8\u5206\u3002\u3053\u3053\u306b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u7528\u306e\u30ea\u30f3\u30af\u3092\u8a18\u8ff0\uff09<br \/>\n&#8211; Products.js \/\/\u5546\u54c1\u4e00\u89a7\uff08\u3053\u3053\u306b\u5546\u54c1\u3092\u5165\u308c\u308b\u30dc\u30bf\u30f3\u304c\u3042\u308b\uff09<br \/>\n&#8211; Cart.js \/\/\u8cb7\u3044\u7269\u304b\u3054\uff08\u3053\u3053\u306b\u5546\u54c1\u5dee\u3057\u623b\u3057\u3001\u8cfc\u5165\u306e\u30dc\u30bf\u30f3\u304c\u3042\u308b\uff09<br \/>\n&#8211; ShopContext.js \/\/\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u60c5\u5831\u306e\u683c\u7d0d<br \/>\n&#8211; GlobalState.js \/\/\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<br \/>\n&#8211; Reducers.js \/\/\u5171\u901a\u306e\u51e6\u7406\u5236\u5fa1\u7528<br \/>\n&#8211; router.js \/\/\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5236\u5fa1\u7528<\/p>\n<p>\u25cfReact\u306b\u304a\u3051\u308b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5236\u5fa1\u306e\u8a18\u8ff0<br \/>\n\u4ee5\u4e0b\u304cReact\u306b\u304a\u3051\u308b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u57fa\u672c\u4f8b\u3068\u306a\u308a\u307e\u3059\u3002\u6ce8\u610f\u70b9\u306f\u3001react-router-dom\u304b\u3089\u547c\u3073\u51fa\u3057\u305fBrowserRouter\u5185\u306b\u30ca\u30d3\u90e8\u5206\u3068\u30d3\u30e5\u30fc\u90e8\u5206\u306e\u53cc\u65b9\u3092\u8a18\u8ff0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\uff08BrowserRouter\u30bf\u30b0\u306e\u5916\u5074\u306b\u8a18\u8ff0\u3057\u305f\u308a\u3059\u308b\u3068\u30a8\u30e9\u30fc\uff09\u3002<\/p>\n<p>\u25cf\u30d3\u30e5\u30fc\u90e8\u5206<br \/>\n\u30d3\u30e5\u30fc\u90e8\u5206\u306fBrowserRoute\u30bf\u30b0\u306b\u8a18\u8ff0\u3055\u308c\u305f\u9818\u57df\u3067\u3042\u308a\u3001Route\u30bf\u30b0\u306b\u76f4\u63a5\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u60c5\u5831\u3092\u8a18\u8ff0\u3057\u3066\u3044\u304f\u5f62\u3068\u306a\u308a\u307e\u3059\u306e\u3067\u3001\u8907\u6570\u306e\u30bf\u30b0\u3092\u8a18\u8ff0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002path\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u9077\u79fb\u5148\u306eURI\u3001component\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u5148\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002\u307e\u305f\u3001exact\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8a18\u8ff0\u3059\u308b\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\u306ftrue\uff09\u3053\u3068\u3067\u5b8c\u5168\u4e00\u81f4\u306e\u30d1\u30b9\u3057\u304b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3055\u308c\u306a\u304f\u306a\u308a\u307e\u3059\u3002<br \/>\n\u305d\u3057\u3066\u3001\u3053\u308c\u3089\u3092Switch\u30bf\u30b0\u3067\u56f2\u3080\u3053\u3068\u3067\u3001\u5f8c\u8ff0\u3059\u308b\u30ca\u30d3\u90e8\u5206\u306e\u30ea\u30f3\u30af\u30bf\u30b0\u306b\u5f93\u3063\u3066\u5207\u63db\u3067\u304d\u308b\u306e\u3067\u3001\u8907\u6570\u30da\u30fc\u30b8\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\nimport React from &#8216;react&#8217;<br \/>\nimport {BrowserRouter as Router, Route, Switch } from &#8220;react-router-dom&#8221;<br \/>\nimport ProductsPage from &#8220;.\/pages\/Products&#8221;<br \/>\nimport CartPage from &#8220;.\/pages\/Cart&#8221;<br \/>\nimport MainNavigation from &#8220;.\/MainNavigation&#8221;<\/p>\n<p>const App = props =&gt;{<br \/>\nreturn(<\/p>\n<p>)<br \/>\n}<br \/>\nexport default App<\/p>\n<p>\u25cf\u30ca\u30d3\u90e8\u5206<br \/>\n\u30ea\u30f3\u30af\u90e8\u5206\u306f\u30bf\u30b0\u306b\u3088\u3063\u3066\u5236\u5fa1\u3055\u308c\u3001to\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u9077\u79fb\u5148\u3068\u306a\u308a\u307e\u3059\u3002<br \/>\nimport React,{ useState,useEffect,useContext,useCallback} from &#8220;react&#8221;<br \/>\nimport ShopContext from &#8220;.\/context\/shop-context&#8221;<br \/>\nimport { NavLink } from &#8220;react-router-dom&#8221;<br \/>\nimport &#8220;.\/MainNavigation.css&#8221;<\/p>\n<p>const MainNavigation = props =&gt;{<br \/>\nconst context = useContext(ShopContext)<br \/>\nconst [cnt,setCnt] = useState([]);<br \/>\nconst context = useContext(ShopContext)<br \/>\nconst [cnt,setCnt] = useState([]);<br \/>\nconst cartItemNumber = useCallback(()=&gt;{<br \/>\nreturn context.cart.reduce((count,curItem)=&gt;{<br \/>\nreturn count + curItem.quantity \/\/\u8cb7\u3044\u7269\u304b\u3054\u306e\u500b\u6570<br \/>\n},0)<br \/>\n},[context.cart])<br \/>\nconst articlesItemNumber = useCallback(()=&gt;{<br \/>\nreturn context.articles.reduce((count,artItem)=&gt;{<br \/>\nreturn count + artItem.quantity \/\/\u8cfc\u5165\u306e\u500b\u6570<br \/>\n},0)<br \/>\n},[context.articles])<\/p>\n<p>useEffect(()=&gt;{<br \/>\nconst cnt_tmp = [&#8230;cnt]<br \/>\ncnt_tmp.cart = cartItemNumber()<br \/>\ncnt_tmp.articles = articlesItemNumber()<br \/>\nsetCnt(cnt_tmp)<br \/>\n},[context])<br \/>\nreturn(<\/p>\n<header>\n<nav>\n<ul>\n<li>Products<\/li>\n<li>Cart ({cnt.cart})<\/li>\n<\/ul>\n<\/nav>\n<\/header>\n<p>)<br \/>\n}<br \/>\nexport default MainNavigation<\/p>\n<p>\u25cfreact-router-dom6\u4ee5\u964d\u306e\u5834\u5408<br \/>\nreact-router-dom6\u4ee5\u964d\u306e\u5834\u5408\u306f\u3001\u4ee5\u4e0b\u306e\u66f8\u304d\u65b9\u3067\u306a\u3044\u3068\u30a8\u30e9\u30fc\u3068\u306a\u308a\u307e\u3059\u3002element\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u76f4\u63a5\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u6307\u5b9a\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\nimport {BrowserRouter as Router, Route, Routes } from &#8220;react-router-dom&#8221;<\/p>\n<p>} \/&gt;<br \/>\n} \/&gt;<\/p>\n<p>\u25cf\u30c7\u30fc\u30bf\u3092\u3084\u308a\u3068\u308a\u3059\u308b<br \/>\nReact\u3067\u30c7\u30fc\u30bf\u3092\u3084\u308a\u3068\u308a\u3059\u308b\u306e\u306f\u305d\u3053\u307e\u3067\u96e3\u89e3\u3055\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u306a\u305c\u306a\u3089\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u9593\u3067\u81ea\u7531\u306b\u3084\u308a\u3068\u308a\u304c\u3067\u304d\u308buseContext\u30d5\u30c3\u30af\u304c\u5144\u5f1f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3042\u3063\u3066\u3082\u4f7f\u3048\u308b\u304b\u3089\u3067\u3059\u3002\u3057\u305f\u304c\u3063\u3066\u3001\u5148\u7a0b\u306eMainNavigation.js\u306e\u5148\u306bGlobalState.js\u3068\u3044\u3046\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3066\u304a\u3044\u3066\u3001\u305d\u3053\u306b\u53d7\u3051\u6e21\u3057\u7528\u306e\u5909\u6570\u3092\u683c\u7d0d\u3057\u3066\u304a\u3051\u3070\u3001\u3042\u3068\u306e\u5909\u6570\u306e\u3084\u308a\u3068\u308a\u306f\u5168\u90e8useContext\u30d5\u30c3\u30af\u304c\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u6e21\u3057\u3057\u3066\u304f\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u25cfuseContext\u30d5\u30c3\u30af<br \/>\n\u4eca\u56de\u3001\u4e2d\u5fc3\u7684\u306a\u6d3b\u8e8d\u3092\u9042\u3052\u308b\u30d5\u30c3\u30af\u304cuseContext\u30d5\u30c3\u30af\u3067\u3059\u304c\u3001\u3053\u308c\u306f\u7c21\u6f54\u306b\u8a00\u3046\u3068\u3001\u89aa\u304b\u3089\u5b6b\u8981\u7d20\u306b\u5024\u3092\u53d7\u3051\u6e21\u3057\u3067\u304d\u308b\u3082\u306e\u3067\u3059\u3002\u5f93\u6765\u306eprops\u306a\u3069\u3060\u3068\u3001\u305f\u3068\u3048\u3070\u3001\u89aa\u304b\u3089\u5b6b\u3078\u8981\u7d20\u3092\u53d7\u3051\u6e21\u3057\u305f\u3044\u5834\u5408\u3001\u5fc5\u305a\u89aa\u2192\u5b50\u2192\u5b6b\u3068\u3044\u3046\u98a8\u306b\u3001\u5024\u3092\u30ea\u30ec\u30fc\u3055\u305b\u306a\u3044\u3068\u3044\u3051\u307e\u305b\u3093\u3067\u3057\u305f\u304c\u3001useContext\u30d5\u30c3\u30af\u3092\u7528\u3044\u308b\u3053\u3068\u3067\u3001\u6e21\u3057\u305f\u3044\u8981\u7d20\u306b\u53d7\u3051\u6e21\u3059\u3053\u3068\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<br \/>\n\u307e\u305f\u3001JSX\u306b\u306f<br \/>\n&lt;\u30b3\u30f3\u30c6\u30af\u30b9\u30c8\u540d.Provider value={\u8ee2\u9001\u3057\u305f\u3044\u30aa\u30d6\u30b8\u30a7\u30af\u30c8} \/&gt;<br \/>\n\u3068\u3059\u308b\u3053\u3068\u3067\u3001\u4efb\u610f\u306e\u30b3\u30f3\u30c6\u30af\u30b9\u30c8\u3092\u3069\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u3082\u8ee2\u9001\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Parent.js<br \/>\nimport React,{createContext} from &#8220;react&#8221;;<br \/>\nexport ParentContext = createContext() \/\/\u4efb\u610f\u306e\u30b3\u30f3\u30c6\u30af\u30b9\u30c8\u4f5c\u6210<br \/>\nconst Parent = ()=&gt;{<br \/>\nconst val = &#8220;hoge&#8221;<br \/>\nreturn(<br \/>\n{\/*\u4efb\u610f\u306eJSX\u3084\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8*\/}<br \/>\n)<br \/>\n}<\/p>\n<p>Child.js<br \/>\nimport React,{useContext} from &#8220;React&#8221;<br \/>\nimport {ParentContext} = fro &#8216;.\/Parent&#8217;<br \/>\nconst Child = ()=&gt;{<br \/>\n}<br \/>\nexport default Child = ()=&gt;{<br \/>\nconst ctx = useContext(ParentContext)<br \/>\nreturn(<br \/>\n&lt;&gt;<\/p>\n<p>{ ctx.val }<\/p>\n<p>&lt;\/&gt;<br \/>\n)<br \/>\n}<\/p>\n<p>\u25cf\u8a18\u8ff0\u4f8b<br \/>\n\u305f\u3068\u3048\u3070\u3001\u524d\u8ff0\u3057\u305f\u7b2c\uff15\u7ae0\u306e\u96fb\u5353\u306e\u5834\u5408\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002props\u3068\u306e\u9055\u3044\u306f\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5024\u3092\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u8ee2\u9001\u3059\u308b\u5834\u5408\u3067\u3059\u304c\u3001\u5236\u5fa1\u7528\u306e\u30e1\u30bd\u30c3\u30c9\u3054\u3068\u30b3\u30f3\u30c6\u30af\u30b9\u30c8\u306b\u7f6e\u3044\u3066\u304a\u304f\u3068\u3044\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n<p>Calc.js<br \/>\nimport React, { useState,createContext } from &#8220;react&#8221;;<br \/>\nimport Setkey from &#8220;.\/Setkey&#8221;;<br \/>\nexport const SetkeyContext = createContext()<br \/>\nconst Calc = ()=&gt;{<br \/>\nconst[ d_sum, setSum ] = useState(0)<br \/>\nconst[ d_str, setStr ] = useState(&#8220;&#8221;)<br \/>\nconst states = {<br \/>\nvals:[<br \/>\n[[&#8216;7&#8242;,&#8217;7&#8217;],[&#8216;8&#8242;,&#8217;8&#8217;],[&#8216;9&#8242;,&#8217;9&#8217;],[&#8216;div&#8217;,&#8217;\u00f7&#8217;]],<br \/>\n[[&#8216;4&#8242;,&#8217;4&#8217;],[&#8216;5&#8242;,&#8217;5&#8217;],[&#8216;6&#8242;,&#8217;6&#8217;],[&#8216;mul&#8217;,&#8217;\u00d7&#8217;]],<br \/>\n[[&#8216;1&#8242;,&#8217;1&#8217;],[&#8216;2&#8242;,&#8217;2&#8217;],[&#8216;3&#8242;,&#8217;3&#8217;],[&#8216;sub&#8217;,&#8217;-&#8216;]],<br \/>\n[[&#8216;0&#8242;,&#8217;0&#8217;],[&#8216;eq&#8217;,&#8217;=&#8217;],[&#8216;c&#8217;,&#8217;C&#8217;],[&#8216;add&#8217;,&#8217;+&#8217;]],<br \/>\n],<br \/>\nlnum: null, \/\/\u88ab\u5e8f\u6570<br \/>\ncnum: 0, \/\/\u5e8f\u6570<br \/>\nsum: 0, \/\/\u5408\u8a08<br \/>\nsign: &#8220;&#8221;, \/\/\u8a18\u53f7<br \/>\nstr:&#8221;&#8221;,\u3000\/\/\u6587\u5b57\u5217<br \/>\n}<br \/>\nconst onReceive = (str,sum)=&gt;{<br \/>\nsetStr(str)<br \/>\nsetSum(sum)<br \/>\n}<\/p>\n<p>return (<\/p>\n<div>\n<p>\u6253\u3061\u8fbc\u3093\u3060\u6587\u5b57:{d_str}<\/p>\n<p>\u5408\u8a08:{d_sum}<\/p>\n<\/div>\n<p>)<br \/>\n}<\/p>\n<p>export default Calc<\/p>\n<p>Setkey.js<br \/>\nimport React,{useState,useEffect,useContext} from &#8220;react&#8221;;<br \/>\nimport {SetkeyContext} from &#8220;.\/Calc&#8221;<\/p>\n<p>const Setkey = ()=&gt;{<br \/>\nconst ctx = useContext(SetkeyContext) \/\/useContext\u30d5\u30c3\u30af\u3067\u5024\u3092\u53d7\u3051\u53d6\u308b<br \/>\nconst [d_vals,setVals] = useState([])<br \/>\nuseEffect(()=&gt;{<br \/>\nconst state = ctx.states \/\/\u30b3\u30f3\u30c6\u30af\u30b9\u30c8\u3067\u53d7\u3051\u6e21\u3055\u308c\u305f\u5909\u6570states<br \/>\nconst vals = {<br \/>\nlnum: state.lnum,<br \/>\ncnum: state.cnum,<br \/>\nsum: state.sum,<br \/>\nsign: state.sign,<br \/>\nstr: state.str,<br \/>\n}<br \/>\nsetVals(vals)<br \/>\n},[])<br \/>\nconst getChar = (chr,strtmp)=&gt;{<br \/>\n\/*\u4e2d\u7565*\/<br \/>\nctx.onReceive(str,sum) \/\/\u30b3\u30f3\u30c6\u30af\u30b9\u30c8\u3067\u53d7\u3051\u6e21\u3055\u308c\u305f\u53d7\u3051\u6e21\u3057\u7528\u306e\u30e1\u30bd\u30c3\u30c9<br \/>\n}<\/p>\n<p>\/\/\u8a08\u7b97\u51e6\u7406<br \/>\nconst calc = (mode,lnum,cnum)=&gt;{<br \/>\nswitch(mode){<br \/>\ncase &#8220;add&#8221;: lnum = cnum + lnum<br \/>\nbreak;<br \/>\ncase &#8220;sub&#8221;: lnum = lnum &#8211; cnum<br \/>\nbreak;<br \/>\ncase &#8220;mul&#8221;: lnum = lnum * cnum<br \/>\nbreak;<br \/>\ncase &#8220;div&#8221;: lnum = lnum \/ cnum<br \/>\nbreak;<br \/>\n}<br \/>\nreturn lnum<br \/>\n}<br \/>\nreturn (<br \/>\n&lt;&gt;<br \/>\n{ctx.states.vals.map((val,key)=&gt;{<br \/>\nreturn (<\/p>\n<div>{<br \/>\nval.map((v,i)=&gt;{<br \/>\nreturn(<\/p>\n<p><button>{getChar(v[0],v[1])}}&gt;<br \/>\n{v[1]}<br \/>\n<\/button><\/p>\n<p>)<br \/>\n})<br \/>\n}<\/p><\/div>\n<p>)<br \/>\n})<br \/>\n}<br \/>\n&lt;\/&gt;<br \/>\n)<br \/>\n}<\/p>\n<p>export default Setkey<\/p>\n<p>\u25cfuseContext\u30d5\u30c3\u30af\u3067\u5144\u5f1f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5236\u5fa1<br \/>\nuseContext\u30d5\u30c3\u30af\u306e\u57fa\u672c\u3092\u8aac\u660e\u3057\u305f\u3068\u3053\u308d\u3067\u3001\u672c\u984c\u306b\u5165\u3063\u3066\u3044\u304d\u307e\u3059\u3002\u89aa\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5fdc\u7528\u3067\u3001\u4ee5\u4e0b\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5236\u5fa1\u306b\u304a\u3051\u308b\u5144\u5f1f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u5bfe\u3057\u3066\u3082\u3001\u7cfb\u7d71\u5316\u3059\u308b\u3053\u3068\u3067\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u6e21\u3059\u3053\u3068\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002\u306a\u304a\u3001\u53d7\u3051\u6e21\u3057\u306e\u5bfe\u8c61\u3068\u306a\u308b\u306e\u306fcreateContext()\u30e1\u30bd\u30c3\u30c9\u3067\u4f5c\u6210\u3057\u305f\u7cfb\u7d71\u540d\u3068\u306a\u308a\u3001\u305d\u308c\u305e\u308c\u5024\u3092\u7d99\u627f\u3055\u305b\u3066\u3044\u307e\u3059\u304c\u3001\u305d\u308c\u305e\u308c\u7cfb\u7d71\u306e\u7570\u306a\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u53d7\u3051\u6e21\u3059\u3053\u3068\u306f\u3067\u304d\u307e\u305b\u3093\u3002\u307e\u305f\u3001\u5b50\u5b6b\u540d.Provider\u8981\u7d20\u306fReact.Fragment\u306e\u4ee3\u7528\u306b\u3082\u306a\u308b\u306e\u3067key\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4ed5\u8fbc\u3080\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<br \/>\n\u305d\u308c\u3092\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5148\u3067\u4f7f\u7528\u3059\u308b\u5834\u5408\u306f\u5f8c\u8ff0\u3059\u308b\u30b0\u30ed\u30fc\u30d0\u30eb\u30b9\u30c6\u30fc\u30c8\u306b\u30c7\u30fc\u30bf\u3092\u7528\u610f\u3057\u3066\u304a\u304f\u3053\u3068\u3067\u3001\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5148\u306b\u5bfe\u3057\u3066\u3001\u81ea\u5728\u306b\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u6e21\u3057\u3001\u540c\u671f\u3092\u53d6\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306fApp\uff08Layout.js\u306b\u3042\u308b\u7d10\u3065\u3051\u5148\uff09\u3068\u306e\u7d10\u3065\u3051\u3060\u3051\u306b\u3057\u3066\u304a\u304f<\/p>\n<p>js.ShoppingCart.js<br \/>\nimport React from &#8216;react&#8217;<br \/>\nimport GlobalState from &#8220;.\/context\/GlobalState&#8221;<\/p>\n<p>const App = props =&gt;{<br \/>\nreturn(<\/p>\n<p>)<br \/>\n}<br \/>\nexport default App<\/p>\n<p>GlobalState.js<br \/>\nimport React ,{ useState, useReducer,useContext } from &#8220;react&#8221;<br \/>\nimport {BrowserRouter as Router, Route, Switch } from &#8220;react-router-dom&#8221;<br \/>\nimport ShopContext from &#8220;.\/shop-context&#8221; \/\/\u5909\u6570\u60c5\u5831<br \/>\nimport { shopReducer, ADD_PRODUCT, REMOVE_PRODUCT, BUY_IT } from &#8220;.\/reducers&#8221;<br \/>\nimport ProductsPage from &#8220;..\/pages\/Products&#8221;<br \/>\nimport CartPage from &#8220;..\/pages\/Cart&#8221;<br \/>\nimport MainNavigation from &#8220;..\/MainNavigation&#8221;<\/p>\n<p>const GlobalState = props =&gt;{<br \/>\nconst context = useContext(ShopContext) \/\/\u3053\u306e\u30d5\u30c3\u30af<br \/>\nconst [products,setProducts] = useState(context.storage)<br \/>\nconst [money,setMoney] = useState(context.money)<br \/>\nconst [total,setTotal] = useState(context.total)<br \/>\n\/\/useReducer\u30d5\u30c3\u30af\u3092\u7528\u3044\u308b\u3053\u3068\u3067\u3001cart\u3092\u540c\u6642\u306b\u6271\u3046\u3053\u3068\u304c\u3067\u304d\u308b<br \/>\nconst [aryState, dispatch] = useReducer(shopReducer, {<br \/>\nproducts: products,<br \/>\nmoney: money,<br \/>\ntotal: total,<br \/>\ncart: [],<br \/>\narticles: [],<br \/>\n})<\/p>\n<p>\/\/\u8cb7\u3044\u7269\u304b\u3054\u306b\u8ffd\u52a0<br \/>\nconst addProductToCart = product =&gt;{<br \/>\ndispatch({type: &#8220;ADD_PRODUCT&#8221;, product: product})<br \/>\n}<br \/>\n\/\/\u8cb7\u3044\u7269\u304b\u3054\u304b\u3089\u524a\u9664<br \/>\nconst removeProductFromCart = productId =&gt;{<br \/>\ndispatch({type: &#8220;REMOVE_PRODUCT&#8221;,productId: productId})<br \/>\n}<br \/>\n\/\/\u8cb7\u3044\u7269\u304b\u3054\u304b\u3089\u5168\u5546\u54c1\u3092\u6240\u6301\u54c1\u306b\u79fb\u3057\u66ff\u3048<br \/>\nconst buyIt = articles =&gt;{<br \/>\ndispatch({type: &#8220;BUY_IT&#8221; ,articles: articles,money: money})<br \/>\n}<\/p>\n<p>return(<\/p>\n<p>)<br \/>\n}<br \/>\nexport default GlobalState<\/p>\n<p>\u25cf\u5404\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8a18\u8ff0<br \/>\n\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5148\u306e\u5404\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8a18\u8ff0\u306f\u3053\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5148\u306f\u5168\u90e8\u3001ShopContext\u3068\u3044\u3046\u30b3\u30f3\u30c6\u30af\u30b9\u30c8\u306b\u3088\u3063\u3066\u7d10\u4ed8\u3051\u3089\u308c\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u306e\u30b3\u30f3\u30c6\u30af\u30b9\u30c8\u304b\u3089JSX\u53ca\u3073\u30c7\u30fc\u30bf\u306e\u5024\u3092\u53d6\u5f97\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u203b\u3053\u306euseContext\u30d5\u30c3\u30af\u306b\u304a\u3044\u3066\u306f\u3001Consumer\u30e9\u30c3\u30d7\u306f\u4e0d\u8981\u3067\u3059\u3002<br \/>\n\u307e\u305f\u3001\u540c\u7cfb\u7d71\u30b3\u30f3\u30c6\u30af\u30b9\u30c8\u304b\u3089\u30a4\u30d9\u30f3\u30c8\u3068\u30c7\u30fc\u30bf\u3092\u540c\u671f\u3059\u308b\u306b\u306f<br \/>\nonClick= {()=&gt;context.methodHoge(payload)}<br \/>\n\u3068\u3059\u308c\u3070\u3001\u3044\u3051\u308b\u3088\u3046\u3067\u3059(payload\u306f\u4efb\u610f\u306e\u30c7\u30fc\u30bf\u30aa\u30d6\u30b8\u30a7\u30af\u30c8)\u3002<\/p>\n<p>Products.js<br \/>\nimport React,{useContext} from &#8220;react&#8221;<br \/>\nimport ShopContext from &#8220;..\/context\/shop-context&#8221;<\/p>\n<p>import &#8220;.\/Products.css&#8221;<br \/>\nconst ProductsPage = props =&gt;{<br \/>\nconst context = useContext(ShopContext)<br \/>\nreturn(<br \/>\n&lt;&gt;<\/p>\n<p><main><\/main><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>{context.products.map(product =&gt; (<\/p>\n<li>\n<div><strong>{product.title}<\/strong> &#8211; {product.price}\u5186 \u3010\u6b8b\u308a{product.stock}\u500b\u3011<\/div>\n<div>{product.stock &gt; 0 &amp;&amp; <button>context.addProductToCart(product)}&gt;\u304b\u3054\u306b\u5165\u308c\u308b<\/button>}<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>))}<\/p>\n<p>&lt;\/&gt;<br \/>\n)<br \/>\n}<br \/>\nexport default ProductsPage<\/p>\n<p>ShopContext.js\u306f\u4ee5\u4e0b\u306e\u3068\u304a\u308a\u3067\u3059<\/p>\n<p>ShopContext.js<br \/>\nimport React from &#8220;react&#8221;<\/p>\n<p>export default React.createContext({<br \/>\nstorage:[<br \/>\n{ id: &#8220;p1&#8221;, title: &#8220;\u82b1\u738b \u30d0\u30d6 \u3086\u305a&#8221;, price: 60\u3000,stock: 10 },<br \/>\n{ id: &#8220;p2&#8221;, title: &#8220;\u30d0\u30b9\u30af\u30ea\u30f3\u3000\u304d\u304d\u6e6f&#8221;, price: 798 , stock: 3 },<br \/>\n{ id: &#8220;p3&#8221;, title: &#8220;\u30a2\u30fc\u30b9\u3000\u6e29\u7d20 \u7425\u73c0\u306e\u6e6f&#8221;, price: 980, stock: 2 },<br \/>\n{ id: &#8220;p4&#8221;, title: &#8220;\u767d\u5143\u30a2\u30fc\u30b9\u3000\u3044\u3044\u6e6f\u65c5\u7acb\u3061\u30dc\u30c8\u30eb&#8221;, price: 398, stock: 6 },<br \/>\n{ id: &#8220;p5&#8221;, title: &#8220;\u30af\u30e9\u30b7\u30a8\u3000\u65c5\u306e\u5bbf&#8221;, price: 598, stock: 7 }<br \/>\n],<br \/>\ncart: [],<br \/>\narticles: [],<br \/>\nmoney: 10000,<br \/>\ntotal: 0, \/\/\u6b8b\u984d<br \/>\n})<\/p>\n<p>\u25cf\u203b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5236\u5fa1\u3057\u306a\u304c\u3089useContext\u30d5\u30c3\u30af\u3067\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u6e21\u3059\u969b\u306e\u6ce8\u610f\u70b9<br \/>\nreact-router-dom\u3067\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u3057\u306a\u304c\u3089useContext\u30d5\u30c3\u30af\u3092\u6d3b\u7528\u3059\u308b\u5834\u5408\u3001\u3044\u304f\u3064\u304b\u6ce8\u610f\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u70b9\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>1:Provider\u3067\u30e9\u30c3\u30d7\u3059\u308b\u30bf\u30b0\u306f\u3061\u3087\u3046\u3069BrowserRouter\u30bf\u30b0\u3092\u8986\u3046\u3088\u3046\u306b\u3059\u308b\u3053\u3068<br \/>\n\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5148\u306e\u5bfe\u8c61\u3068\u306a\u308b\u306e\u306fBrowserRouter\u30bf\u30b0\u5185\u306a\u306e\u3067\u3001\u305d\u3053\u306buseContext\u30bf\u30b0\u3092\u7528\u3044\u308b\u5834\u5408\u306f\u3001\u305d\u306e\u30bf\u30b0\u3092\u8986\u3046\u3088\u3046\u306b\u8a18\u8ff0\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>App.js<br \/>\nconst App = ()=&gt;{<br \/>\nreturn(<\/p>\n<p>{\/* \u4e2d\u7565 *\/}<\/p>\n<p>)<br \/>\n}<\/p>\n<p>\u3053\u306e\u30eb\u30fc\u30eb\u3092\u5b88\u3089\u306a\u3044\u3068\u3001\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u6e21\u307e\u305b\u3093\u3002\u307e\u305f\u3001\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5148\u3067\u540c\u671f\u51e6\u7406\u3092\u884c\u3044\u305f\u3044\u5834\u5408\u306f<\/p>\n<p>useContext\u3067useState\u306e\u623b\u308a\u50242\u3064\u3092\u53d7\u3051\u6e21\u3059\u3068\u4fbf\u5229<br \/>\n\u3053\u306e\u3088\u3046\u306b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5143\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u8a2d\u5b9a\u3057\u3066\u3044\u305fuseState\u30d5\u30c3\u30af\u306e\u623b\u308a\u5024\uff08\u66f4\u65b0\u524d\u3001\u66f4\u65b0\u5bfe\u8c61\uff09\u30922\u3064\u3068\u3082\u6e21\u3057\u3066\u3001\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5148\u3067\u3001\u30b9\u30d7\u30ec\u30c3\u30c9\u69cb\u6587\u3067\u53d7\u3051\u53d6\u308c\u3070\u3001\u7c21\u5358\u306b\u540c\u671f\u304c\u53d6\u308c\u307e\u3059\uff08\u30b9\u30d7\u30ec\u30c3\u30c9\u69cb\u6587\u3067\u5c55\u958b\u3057\u3066\u3001\u5206\u5272\u4ee3\u5165\u3059\u308b\u3053\u3068\u3092\u5fd8\u308c\u306a\u3044\u3067\u4e0b\u3055\u3044\u3002\u5168\u524a\u9664\u3059\u308b\u5834\u5408\u3067\u3082\u540c\u69d8\u3067\u3059\uff09\u3002<\/p>\n<p>App.js<br \/>\nconst App = ()=&gt;{<br \/>\nreturn(<\/p>\n<p>{\/* \u4e2d\u7565 *\/}<\/p>\n<p>)<br \/>\n}<\/p>\n<p>Hoge.js<br \/>\nctx = useContext(Hoge.context)<br \/>\nuseEffect(()=&gt;{<br \/>\nconst piyo = [&#8230;ctx.fuga] \/\/useContext\u304b\u3089\u7d99\u627f\u3057\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3002\u30b9\u30d7\u30ec\u30c3\u30c9\u69cb\u6587\u3067\u53d7\u3051\u53d6\u308b<br \/>\nctx.setFuga(piyo) \/\/\u66f4\u65b0\u5bfe\u8c61\u306b\u7528\u3044\u308b\u30e1\u30bd\u30c3\u30c9\u3054\u3068\u53d7\u3051\u53d6\u308c\u3070\u540c\u671f\u304c\u3068\u308c\u308b<br \/>\n},[])<\/p>\n<p>\u25cfuseCallback\u30d5\u30c3\u30af<br \/>\n\u3053\u306e\u30b7\u30b9\u30c6\u30e0\u3067\u306fuseCallback\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002useCallback\u30d5\u30c3\u30af\u306f\u7aef\u7684\u306b\u3044\u3048\u3070\u3001\u7e70\u308a\u8fd4\u3057\u884c\u3046\u52d5\u4f5c\u306b\u304a\u3044\u3066\u51e6\u7406\u3092\u8a18\u61b6\u3055\u305b\u3066\u304a\u304f\u30d5\u30c3\u30af\u3067\u3001\u57fa\u672c\u306f\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u5411\u4e0a\u306e\u305f\u3081\u306e\u30d5\u30c3\u30af\u3067\u3059\u3002\u3053\u3053\u3067\u306f\u30ca\u30d3\u306b\u8868\u793a\u3055\u308c\u308b\u3001\u8cb7\u3044\u7269\u304b\u3054\u306e\u5546\u54c1\u500b\u6570\u3092\u8a08\u7b97\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u8a08\u7b97\u51e6\u7406\u304c\u5fc5\u8981\u306a\u306e\u306f\u500b\u6570\u304c\u5909\u5316\u3057\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3060\u3051\u3067\u3044\u3044\u306e\u3067\u3001\u3053\u306e\u3088\u3046\u306b\u30ca\u30d3\u306b\u8a18\u8ff0\u3059\u308b\u3053\u3068\u3067\u3001\u500b\u6570\u304c\u5909\u5316\u3057\u305f\u5834\u5408\u306e\u307f\u5408\u8a08\u500b\u6570\u306e\u518d\u8a08\u7b97\u51e6\u7406\u3092\u884c\u3046\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059(length\u3060\u3068\u540c\u4e00\u5546\u54c1\u304c\u8907\u6570\u306b\u306a\u3063\u305f\u5834\u5408\u3001\u5bfe\u5fdc\u3067\u304d\u306a\u3044)\u3002<br \/>\n\/\/\u8cb7\u3044\u7269\u304b\u3054\u306e\u500b\u6570\u304c\u5909\u5316\u3057\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u8a08\u7b97<br \/>\nconst cartItemNumber = useCallback(()=&gt;{<br \/>\nreturn context.cart.reduce((count,curItem)=&gt;{<br \/>\nreturn count + curItem.quantity \/\/\u8cb7\u3044\u7269\u304b\u3054\u306e\u500b\u6570<br \/>\n},0)<br \/>\n},[context.cart])<br \/>\nuseEffect(()=&gt;{<br \/>\nconst cnt_tmp = [&#8230;cnt] \/\/\u5206\u5272\u4ee3\u5165\u3067\u500b\u6570\u7ba1\u7406\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u5c55\u958b<br \/>\ncnt_tmp.cart = cartItemNumber() \/\/\u8cb7\u3044\u7269\u304b\u3054\u306e\u500b\u6570<br \/>\nsetCnt(cnt_tmp)<br \/>\n},[context])<\/p>\n<p>\u25cfuseReducer\u30d5\u30c3\u30af<br \/>\n\u3053\u306e\u30b7\u30b9\u30c6\u30e0\u3067\u306fuseReducer\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002useReducer\u30d5\u30c3\u30af\u306f\u8907\u96d1\u306b\u5206\u5c90\u3055\u308c\u305f\u51e6\u7406\u3092\u96c6\u7d04\u5316\u3059\u308b\u305f\u3081\u306e\u30d5\u30c3\u30af\u3067\u3059\u3002\u3053\u306e\u8cb7\u3044\u7269\u304b\u3054\u306a\u3069\u306e\u3088\u3046\u306b\u3001\u51e6\u7406\u3059\u308b\u30c7\u30fc\u30bf\u304c\u8907\u6570\uff08\u5546\u54c1\u683c\u7d0d\u3001\u8cb7\u3044\u7269\u304b\u3054\u3001\u6240\u6301\u91d1\u3001\u5408\u8a08\u91d1\u984d\u306a\u3069\u51e6\u7406\u3057\u306a\u3051\u308c\u3070\u3044\u3051\u306a\u3044\u5909\u6570\u304c\u8272\u3005\u3042\u308b\uff09\u3001\u307e\u305f\u306f\u30b9\u30c6\u30fc\u30bf\u30b9\u306b\u3088\u3063\u3066\u51e6\u7406\u3092\u5206\u5c90\u3057\u305f\u3044\u5834\u5408\u306b\u91cd\u5b9d\u3057\u307e\u3059\u3002<\/p>\n<p>vue<br \/>\nconst[aryState, dispatch] = useReducer(shopReducer,initial)<\/p>\n<p>\u3053\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u304a\u308a\u3001useState\u3068\u4f3c\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001useState\u3068\u306e\u9055\u3044\u306f<\/p>\n<p>\u30b9\u30c6\u30fc\u30bf\u30b9\u3092\u683c\u7d0d\u3067\u304d\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6301\u3063\u3066\u3044\u308b\uff08\u51e6\u7406\u306e\u5206\u5c90\u304c\u3067\u304d\u308b\uff09<\/p>\n<p>\u8907\u6570\u306e\u30c7\u30fc\u30bf\u3092\u4e00\u5ea6\u306b\u51e6\u7406\u3067\u304d\u308b<br \/>\n\u3053\u3046\u3044\u3046\u7279\u9577\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u305d\u3057\u3066aryState\u306b\u4ee3\u5165\u3059\u308b\u306e\u306f\u66f4\u65b0\u5bfe\u8c61\u3068\u306a\u308b\u30c7\u30fc\u30bf\u3001initial\u306b\u4ee3\u5165\u3059\u308b\u306e\u306fshopReducer\u3067\u51e6\u7406\u3059\u308b\u305f\u3081\u306b\u7528\u3044\u308b\u30c7\u30fc\u30bf\u60c5\u5831\u306e\u521d\u671f\u5024\u3068\u306a\u308a\u307e\u3059\u3002\u307e\u305f\u3001dispatch\u306f\u66f4\u65b0\u51e6\u7406\u3092\u3059\u308b\u305f\u3081\u306estate\u30e1\u30bd\u30c3\u30c9\u3092\u683c\u7d0d\u3057\u3001\u66f4\u65b0\u51e6\u7406\u306e\u7a2e\u985e\u3092\u793a\u3059type\u3001\u30c7\u30fc\u30bf\u3092\u683c\u7d0d\u3059\u308bpayload\u306e2\u3064\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u3042\u308a\u307e\u3059\uff08payload\u30d7\u30ed\u30d1\u30c6\u30a3\u306f\u7701\u7565\u53ef\u3067\u3001\u666e\u901a\u306f\u8a18\u8ff0\u3057\u307e\u305b\u3093\uff09\u3002\u305d\u308c\u3092onClick\u306a\u3069\u306e\u30a4\u30d9\u30f3\u30c8\u306e\u5f15\u6570\u306b\u4ee3\u5165\u3057\u3066\u8a2d\u5b9a\u3057\u307e\u3059\uff08\u968e\u5c64\u5316\u3057\u3066\u308b\u306e\u3067\u3001useContext\u30d5\u30c3\u30af\u306b\u3088\u3063\u3066\u5f15\u304d\u6e21\u3055\u308c\u305f\u5909\u6570\u3092\u540c\u671f\u3055\u305b\u3066\u3044\u307e\u3059\uff09\u3002<br \/>\n\u6b8b\u308b\u5909\u6570shopReducer\u306freducer\u30e1\u30bd\u30c3\u30c9\u3068\u3044\u3044\u3001aryState\u3092\u5177\u4f53\u7684\u306b\u66f4\u65b0\u3059\u308b\u30e1\u30bd\u30c3\u30c9\uff08\u3053\u3053\u3067\u306f\u8cb7\u3044\u7269\u304b\u3054\u306b\u8ffd\u52a0\uff09\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<br \/>\n\u5177\u4f53\u7684\u306b\u898b\u3066\u3044\u304d\u307e\u3059\u3002useReducer\u306e\u7b2c\u4e00\u5f15\u6570\u306b\u3042\u308b\u30e1\u30bd\u30c3\u30c9\u306e\u4e2d\u8eab\u304c\u8a18\u8ff0\u3055\u308c\u3066\u304a\u308a\u3001state\u306b\u306faryState\u306b\u3088\u3063\u3066\u66f4\u65b0\u5bfe\u8c61\u3068\u306a\u308b\u30c7\u30fc\u30bf\u3001action\u306b\u306fdispatch\u306b\u8a18\u8ff0\u3055\u308c\u305ftype\u3068\u5bfe\u8c61\u3068\u306a\u308b\u30c7\u30fc\u30bf\u304c\u683c\u7d0d\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u306a\u306e\u3067\u3001action.type\u304cdispatch\u306etype\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u5408\u81f4\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u51e6\u7406\u3092\u632f\u308a\u5206\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u308f\u3051\u3067\u3059\u3002<br \/>\n\u3056\u3063\u304f\u3070\u3089\u3093\u306buseReducer\u30d5\u30c3\u30af\u306e\u50cd\u304d\u3092\u5206\u89e3\u3059\u308b\u3068\u3053\u3046\u306a\u308a\u307e\u3059\u3002<br \/>\n[\u66f4\u65b0\u5f8c\u306e\u5024,{type:\u51e6\u7406\u306e\u5206\u5c90\u540d,(payload):\u5dee\u5206\u30c7\u30fc\u30bf}] = useReducer(\u51e6\u7406,\u521d\u671f\u5024)<\/p>\n<p>GlobalState.js<br \/>\nconst [aryState, dispatch] = useReducer(shopReducer, {<br \/>\nproducts: products,<br \/>\nmoney: money,<br \/>\ntotal: total,<br \/>\ncart: [],<br \/>\narticles: [],<br \/>\n})<\/p>\n<p>reducers.js<br \/>\n\/\/useReducer\u306b\u7d10\u3065\u3044\u305f\u51e6\u7406\u632f\u308a\u5206\u3051\u306e\u95a2\u6570<br \/>\nexport const shopReducer = (state, action) =&gt; {<br \/>\nswitch (action.type) {<br \/>\ncase &#8220;ADD_PRODUCT&#8221;: \/\/\u8cb7\u3044\u7269\u304b\u3054\u306b\u8ffd\u52a0<br \/>\nreturn addProductToCart(action.product, state);<br \/>\ncase &#8220;REMOVE_PRODUCT&#8221;: \/\/\u8cb7\u3044\u7269\u304b\u3054\u304b\u3089\u524a\u9664<br \/>\nreturn removeProductFromCart(action.productId, state);<br \/>\ncase &#8220;BUY_IT&#8221;:\u3000\/\/\u8cb7\u3044\u7269\u304b\u3054\u304b\u3089\u8cfc\u5165<br \/>\nreturn buyIt(action.articles, state);<br \/>\ndefault:<br \/>\nreturn state;<br \/>\n}<br \/>\n};<\/p>\n<p>\u3061\u306a\u307f\u306b\u5236\u5fa1\u7528\u30d7\u30ed\u30b0\u30e9\u30e0\u3001reducer.js\u306e\u5168\u5bb9\u306f\u3053\u3046\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u5404\u7a2e\u51e6\u7406\u30e1\u30bd\u30c3\u30c9\u306fVue\u306e\u3082\u306e\u306e\u4f7f\u3044\u56de\u3057\u3067\u3001\u6700\u5f8c\u306e\u623b\u308a\u5024\u3092\u8fd4\u3059\u90e8\u5206\u3060\u3051\u5909\u66f4\u3059\u308c\u3070\u3001\u3069\u3093\u306a\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306b\u3082\u63db\u88c5\u3067\u304d\u305f\u308a\u3057\u307e\u3059\u3002<\/p>\n<p>reducers.js<br \/>\nconst addProductToCart = (product, state) =&gt; {<br \/>\nlet cartIndex = null<br \/>\nconst stat = state<br \/>\n\/\/\u8cb7\u3044\u7269\u304b\u3054\u306e\u8abf\u6574<br \/>\nconst updatedCart = stat.cart;<br \/>\nconst updatedItemIndex = updatedCart.findIndex(<br \/>\nitem =&gt; item.id === product.id<br \/>\n);<br \/>\nif (updatedItemIndex &lt; 0) { updatedCart.push({ &#8230;product, quantity: 1,stock: 0 }); cartIndex = updatedCart.length -1 \/\/\u30ab\u30fc\u30c8\u306e\u6700\u5f8c\u5c3e } else { const updatedItem = { &#8230;updatedCart[updatedItemIndex] } updatedItem.quantity++; updatedCart[updatedItemIndex] = updatedItem; cartIndex = updatedItemIndex\u3000\/\/\u52a0\u7b97\u5bfe\u8c61\u306e\u30a4\u30f3\u30c7\u30c3\u30af\u30b9 } stat.cart = updatedCart \/\/\u5546\u54c1\u5728\u5eab\u306e\u8abf\u6574 const updatedProducts = stat.products \/\/\u5546\u54c1\u60c5\u5831 const productid = updatedCart[cartIndex].id \/\/\u5728\u5eab\u6e1b\u7b97\u5bfe\u8c61\u306e\u5546\u54c1 const productIndex = updatedProducts.findIndex( p =&gt; productid === p.id<br \/>\n)<br \/>\nconst tmpProduct = { &#8230;updatedProducts[productIndex] }<br \/>\ntmpProduct.stock&#8211; \/\/\u5728\u5eab\u306e\u6e1b\u7b97<br \/>\nupdatedProducts[productIndex] = tmpProduct<br \/>\nstat.products = updatedProducts<br \/>\n\/\/\u5408\u8a08\u91d1\u984d\u306e\u8abf\u6574<br \/>\nconst total = stat.total<br \/>\nconst sum = getSummary(updatedCart,total)<br \/>\nstat.total = sum<br \/>\nconsole.log(stat) \/\/total\u306f0\u306e\u307e\u307e\u306b\u306a\u3063\u3066\u3057\u307e\u3046<br \/>\nstate = {&#8230;state,stat}<br \/>\nreturn state<br \/>\n};<\/p>\n<p>\/\/\u30ab\u30fc\u30c8\u304b\u3089\u5546\u54c1\u306e\u8fd4\u5374<br \/>\nconst removeProductFromCart = (productId, state) =&gt; {<br \/>\nconst updatedCart = [&#8230;state.cart];<br \/>\nconst updatedItemIndex = updatedCart.findIndex(item =&gt; item.id === productId);<br \/>\nconst updatedItem = { &#8230;updatedCart[updatedItemIndex] }<br \/>\nupdatedItem.quantity&#8211;<br \/>\nif (updatedItem.quantity &lt;= 0) { updatedCart.splice(updatedItemIndex, 1); } else { updatedCart[updatedItemIndex] = updatedItem; } \/\/\u5546\u54c1\u5728\u5eab\u306e\u8abf\u6574 const updatedProducts = [&#8230;state.products] \/\/\u5546\u54c1\u60c5\u5831 const productIndex = updatedProducts.findIndex( p =&gt; p.id === productId<br \/>\n)<br \/>\nconst tmpProduct = { &#8230;updatedProducts[productIndex] }<br \/>\ntmpProduct.stock++ \/\/\u5728\u5eab\u306e\u52a0\u7b97<br \/>\nupdatedProducts[productIndex] = tmpProduct<br \/>\nlet summary = getSummary(updatedCart,state.total)<br \/>\nstate = {&#8230;state, total: summary}<br \/>\nstate = { &#8230;state, cart: updatedCart }<br \/>\nstate = {&#8230;state, products: updatedProducts }<br \/>\nreturn state<br \/>\n};<\/p>\n<p>\/\/\u8cfc\u5165\u624b\u7d9a<br \/>\nconst buyIt = (articles,state)=&gt;{<br \/>\nlet cart = state.cart<br \/>\nlet money = state.money<br \/>\nlet total = state.total<br \/>\nlet updatedArticles = [&#8230;articles] \/\/\u6240\u6301\u54c1<br \/>\nlet tmp_cart = [&#8230;state.cart]<\/p>\n<p>for( let cart of tmp_cart){<br \/>\nlet articlesIndex = articles.findIndex(<br \/>\na =&gt; a.id === cart.id<br \/>\n)<br \/>\nif (articlesIndex &lt; 0) { updatedArticles.push(cart); } else { const tmpArticles = { &#8230;articles[articlesIndex] } tmpArticles.quantity++; updatedArticles[articlesIndex] = tmpArticles; } } let summary = getSummary(cart,total) let rest = money &#8211; summary tmp_cart.splice(0) summary = 0 state = {&#8230;state, total: summary} state = {&#8230;state, money: rest} state = {&#8230;state, cart: tmp_cart} state = {&#8230;state, articles: updatedArticles} return state } const getSummary = (cart,total)=&gt;{<br \/>\nconst sum = cart.reduce((total,{price = 0,quantity})=&gt; total + price * quantity,0)<br \/>\nreturn sum<br \/>\n}<\/p>\n<p>export const shopReducer = (state, action) =&gt; {<br \/>\nswitch (action.type) {<br \/>\ncase &#8220;ADD_PRODUCT&#8221;:<br \/>\nreturn addProductToCart(action.product, state);<\/p>\n<p>case &#8220;REMOVE_PRODUCT&#8221;:<br \/>\nreturn removeProductFromCart(action.productId, state);<\/p>\n<p>case &#8220;BUY_IT&#8221;:<br \/>\nreturn buyIt(action.articles, state);<\/p>\n<p>default:<br \/>\nreturn state;<br \/>\n}<br \/>\n};<\/p>\n<p>\u25cf\u8a73\u7d30\u753b\u9762\u3092\u4f5c\u6210\u3059\u308b\uff08\u30d1\u30e9\u30e1\u30fc\u30bf\u306e\u3084\u308a\u3068\u308a\uff09<br \/>\nReact\u3067\u3082\u8a73\u7d30\u753b\u9762\u3092\u4f5c\u6210\u3059\u308b\u5834\u5408\u3001\u30d1\u30e9\u30e1\u30fc\u30bf\u306e\u3084\u308a\u3068\u308a\u304c\u5fc5\u9808\u306b\u306a\u3063\u3066\u304d\u307e\u3059\u3002\u305f\u3060\u3001React\u306e\u5834\u5408\u306fVue\u3001\u305d\u3057\u3066\u5f8c\u8ff0\u3059\u308bAngular\u3088\u308a\u4fbf\u5229\u306a\u70b9\u304c\u3042\u308a\u3001\u64cd\u4f5c\u3059\u308b\u306e\u304chtml\u3067\u306f\u306a\u304f\u3066JSX\u3067\u3042\u308b\u305f\u3081\u3001to\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u5909\u6570\u3084\u95a2\u6570\u3092\u30c0\u30a4\u30ec\u30af\u30c8\u306b\u57cb\u3081\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Products.js<br \/>\n<strong>{product.title}<\/strong><\/p>\n<p>\u307e\u305f\u3001\u30b0\u30ed\u30fc\u30d0\u30eb\u30b9\u30c6\u30fc\u30c8\u306eRouter\u30bf\u30b0\u5185\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8ffd\u8a18\u3057\u3066\u304a\u304d\u307e\u3059\u3002\u540c\u69d8\u306b:id\u304c\u30d1\u30e9\u30e1\u30fc\u30bf\u540d\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>js.GlobalState.js<br \/>\nimport DetailPage from &#8220;..\/pages\/Detail&#8221; \/\/\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8ffd\u8a18<br \/>\nconst GlobalState = ()=&gt;{<br \/>\n\/*\u7565*\/<br \/>\nreturn(<br \/>\n{\/*\u7565*\/}<\/p>\n<p>{\/*\u7565*\/}<br \/>\n)<br \/>\n}<\/p>\n<p>\u25cf\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b<br \/>\n\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u5834\u5408\u306fuseParams\u3068\u3044\u3046\u30d5\u30c3\u30af\u3092\u6d3b\u7528\u3067\u304d\u307e\u3059(\u3053\u306e\u30d5\u30c3\u30af\u306freact-router-dom\u304b\u3089\u306a\u306e\u3067\u6ce8\u610f)\u3002\u305d\u3057\u3066\u3001\u3053\u306euseParams\u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u305d\u306e\u307e\u307e\u62bd\u51fa\u3067\u304d\u308b\u306e\u3067\u4fbf\u5229\u3067\u3059\u3002\u305f\u3060\u3057\u3001React\u306a\u3089\u3067\u306f\u306e\u6ce8\u610f\u70b9\u304c\u3042\u308a\u3001JSX\u306b\u5c55\u958b\u3059\u308b\u5834\u5408\u3001useEffect\u3060\u3068DOM\u751f\u6210\u5f8c\u306b\u4f5c\u52d5\u3059\u308b\u3082\u306e\u306a\u306e\u3067\u3001\u672a\u5b9a\u7fa9\u306e\u5909\u6570\u30a8\u30e9\u30fc\u306b\u60a9\u307e\u3055\u308c\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002\u306a\u306e\u3067\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5316\u3057\u3066\u5c55\u958b\u3059\u308b\u306e\u304c\u4e00\u822c\u7684\u306a\u65b9\u6cd5\u3067\u3059\u304c\u2026\u3002<\/p>\n<p>Detail.js<br \/>\nimport React,{useState,useContext} from &#8220;react&#8221;<br \/>\nimport ShopContext from &#8220;..\/context\/shop-context&#8221;<br \/>\nimport { useParams } from &#8220;react-router-dom&#8221;<\/p>\n<p>const DetailPage = ()=&gt;{<br \/>\nconst context = useContext(ShopContext)<br \/>\nconst [d_item,setItems] = useState([])<br \/>\nconst { id } = useParams() \/\/useParams\u306f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u305d\u306e\u307e\u307e\u62bd\u51fa\u3067\u304d\u308b<br \/>\n\/\/\u30ab\u30b9\u30bf\u30e0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u4f5c\u6210\u3057\u3001\u305d\u3053\u3067\u6e96\u5099\u3059\u308b<br \/>\nconst ShowItem = ()=&gt;{<br \/>\nconst selid = `p${id}` \/\/\u53d6\u5f97\u3057\u305f\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u691c\u7d22\u7528id\u306b\u4fee\u6b63<br \/>\nconst item = products.find((item)=&gt; item.id == selid) \/\/\u4e00\u81f4\u3059\u308b\u30a2\u30a4\u30c6\u30e0\u53d6\u5f97<br \/>\nreturn(<\/p>\n<ul>\n<li>{item.title}<\/li>\n<\/ul>\n<p>)<br \/>\n}<br \/>\nreturn(<br \/>\n&lt;&gt;<\/p>\n<p>&lt;\/&gt;<br \/>\n)<br \/>\n}<br \/>\nexport default DetailPage<\/p>\n<p>\u3069\u3046\u3057\u3066\u3082\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5316\u3057\u305f\u304f\u306a\u3044\u5834\u5408\u306fuseCallback\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3059\u308c\u3070\u3001DOM\u751f\u6210\u524d\u306b\u51e6\u7406\u3092\u5b9f\u884c\u3057\u3066\u7d50\u679c\u3092\u8a18\u61b6\u3067\u304d\u308b\u306e\u3067\u3001\u304d\u3061\u3093\u3068\u5909\u6570\u3092\u5c55\u958b\u3067\u304d\u305f\u308a\u3057\u307e\u3059\uff08useEffect\u30d5\u30c3\u30af\u3060\u3051\u3060\u3068DOM\u751f\u6210\u5f8c\u3057\u304b\u6a5f\u80fd\u3057\u306a\u3044\u306e\u3067\u3001d_item\u304c\u672a\u5b9a\u7fa9\u5909\u6570\u30a8\u30e9\u30fc\u306b\u306a\u308a\u307e\u3059\uff09\u3002<\/p>\n<p>js.Detail.js<br \/>\nimport React,{useState,use,useContext,useEffect,useCallback} from &#8220;react&#8221;<br \/>\nimport ShopContext from &#8220;..\/context\/shop-context&#8221;<br \/>\nimport { useParams } from &#8220;react-router-dom&#8221;<\/p>\n<p>const DetailPage = ()=&gt;{<br \/>\nconst context = useContext(ShopContext)<br \/>\nconst [d_item,setItem] = useState([])<br \/>\nconst { id } = useParams()<br \/>\n\/\/\u30a2\u30a4\u30c6\u30e0\u53d6\u5f97\u51e6\u7406\u3092\u8a18\u61b6\u3055\u305b\u3066\u304a\u304f\u3053\u3068\u3067\u3001JSX\u5c55\u958b\u524d\u306b\u51e6\u7406\u304c\u53ef\u80fd\u306b\u306a\u308b<br \/>\nconst getCallback = useCallback(()=&gt;{<br \/>\nconst products = [&#8230;context.products]<br \/>\nconst selid = `p${id}`<br \/>\nconst item = products.find((item)=&gt; item.id == selid)<br \/>\nsetItem(item)<br \/>\n},[id])<br \/>\nuseEffect(()=&gt;{<br \/>\ngetCallback()<br \/>\n},[])<br \/>\nreturn(<br \/>\n&lt;&gt;<\/p>\n<ul>\n<li>{d_item.title}<\/li>\n<\/ul>\n<p>&lt;\/&gt;<br \/>\n)<br \/>\n}<br \/>\nexport default DetailPage<\/p>\n<p>\u25cf\u30af\u30a8\u30ea\u3092\u4f7f\u3063\u3066\u30c7\u30fc\u30bf\u3092\u3084\u308a\u3068\u308a\u3059\u308b<br \/>\n\u3067\u306f\u3001URL\u306b\u57cb\u3081\u8fbc\u307e\u308c\u305f\u30af\u30a8\u30ea\u30d1\u30e9\u30e1\u30fc\u30bf\uff08get\uff09\u3092\u5229\u7528\u3057\u3066\u3001\u540c\u3058\u64cd\u4f5c\u3092\u3057\u3066\u307f\u307e\u3059\u3002\u305f\u3060\u3001React\u306e\u5834\u5408\u306f\u30af\u30a8\u30ea\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u306e\u306f\u5c11\u3057\u624b\u9593\u304c\u304b\u304b\u308a\u307e\u3059\u3002<\/p>\n<p>Products.js<br \/>\n<strong>{product.title}<\/strong><\/p>\n<p>GlobalState.js<\/p>\n<p>\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u5834\u5408\u306fuseLocation\u3068\u3044\u3046\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u3001\u305d\u3053\u304b\u3089search\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u53d6\u5f97\u3001\u305d\u308c\u3092URLSearchParams\u30e1\u30bd\u30c3\u30c9\u3067\u30af\u30a8\u30ea\u60c5\u5831\u3092\u53d6\u5f97\u3001\u305d\u3053\u304b\u3089get\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3059\u308b\u3068\u3044\u3046\u624b\u9593\u3092\u8e0f\u307f\u307e\u3059\u3002<\/p>\n<p>Detail.js<br \/>\nimport { useLocation } from &#8220;react-router-dom&#8221;<\/p>\n<p>const DetailPage = ()=&gt;{<br \/>\nconst context = useContext(ShopContext)<br \/>\nconst [d_item,setItem] = useState([])<br \/>\nconst { search } = useLocation() \/\/search\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u53d6\u5f97<br \/>\nconst getCallback = useCallback(()=&gt;{<br \/>\nconst query = new URLSearchParams(search) \/\/\u30af\u30a8\u30ea\u60c5\u5831\u3092\u53d6\u5f97<br \/>\nconst selid = query.get(&#8216;id&#8217;) \/\/get\u60c5\u5831\u3092\u53d6\u5f97<br \/>\nconst item = context.products.find((item)=&gt; item.id == selid)<br \/>\nsetItem(item)<br \/>\n},[search])<br \/>\nuse<\/p>\n<p>\u203breact-router-dom6\u4ee5\u964d\u306a\u3089useSearchParams\u30d5\u30c3\u30af\u304c\u65b0\u305f\u306b\u5b9f\u88c5\u3055\u308c\u305f\u306e\u3067\u3001\u305d\u3053\u304b\u3089get\u30e1\u30bd\u30c3\u30c9\u3067\u3059\u3050\u306b\u53d6\u5f97\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Detail.js<br \/>\nimport { useSearchParams } from &#8220;react-router-dom&#8221;<br \/>\nconst query = useSearchParams()<br \/>\nconst getCallback = useCallback(()=&gt;{<br \/>\nconst selid = query.get(&#8216;id&#8217;)<br \/>\nconst item = context.products.find((item)=&gt; item.id == selid)<br \/>\nsetItem(item)<br \/>\n},[query])<\/p>\n<p>\u25cf\u623b\u308b\u30dc\u30bf\u30f3\u3092\u5b9f\u88c5\u3059\u308b<br \/>\n\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5148\u304b\u3089\u524d\u30da\u30fc\u30b8\u306b\u623b\u308b\u5834\u5408\u306fuseHistory\u30d5\u30c3\u30af\u306egoBack\u30e1\u30bd\u30c3\u30c9\u3092\u7528\u3044\u307e\u3059\u3002<\/p>\n<p>Detail.js<br \/>\nimport { useLocation,useHistory } from &#8220;react-router-dom&#8221; \/\/useHistory\u3092\u8ffd\u8a18<br \/>\n\/*\u7565*\/<br \/>\nconst DetailPage = ()=&gt;{<br \/>\nconst context = useContext(ShopContext)<br \/>\nconst [d_item,setItem] = useState([])<br \/>\nconst {search} = useLocation()<br \/>\nconst history = useHistory()<br \/>\nuseMemo(()=&gt;{<br \/>\nconst query = new URLSearchParams(search)<br \/>\nconst selid = query.get(&#8216;id&#8217;)<br \/>\nconst item = context.products.find((item)=&gt; item.id == selid)<br \/>\nsetItem(item)<br \/>\n},[search])<br \/>\nreturn(<br \/>\n&lt;&gt;<\/p>\n<ul>\n<li>{d_item.title}<\/li>\n<\/ul>\n<p><button>history.goBack()}&gt;\u623b\u308b<\/button><br \/>\n&lt;\/&gt;<br \/>\n)<br \/>\n}<br \/>\nexport default DetailPage<\/p>\n<p>\u203b react-router-dom6\u306e\u5834\u5408<br \/>\nuseHistory\u304c\u5ec3\u6b62\u3055\u308c\u3001useNavigate\u3092\u4f7f\u7528\u3059\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u306f\u5f15\u6570\u306b\u9077\u79fb\u5148\u306e\u30d1\u30b9\u3092\u660e\u793a\u7684\u306b\u8a18\u8ff0\u3067\u304d\u308b\u306e\u3067\u3001\u975e\u5e38\u306b\u4fbf\u5229\u3067\u3059\u3002<\/p>\n<p>js<br \/>\nimport {useNavigate } from &#8216;react-router-dom&#8217;<br \/>\n\/*\u4e2d\u7565*\/<br \/>\nconst navigate = useNavigate()<br \/>\nnavigate(&#8216;\/&#8217;) \/\/\u30db\u30fc\u30e0\u306b\u623b\u308b<\/p>\n<p>\u6f14\u7fd2\uff16\u306e\u307e\u3068\u3081<\/p>\n<p>\u25a0React\u306e\u307e\u3068\u3081<\/p>\n<p>react-router-dom\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u5fc5\u9808\u3002<br \/>\n\u30ea\u30f3\u30af\u306f\u30bf\u30b0\u3067\u30ea\u30f3\u30af\u5143\u3092\u3001\u30bf\u30b0\u3067\u30ea\u30f3\u30af\u5148\u3092\u8868\u793a\u3059\u308b\u3002<br \/>\n\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u60c5\u5831\u306fRoute\u30bf\u30b0\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306b\u8a18\u8ff0\u3059\u308b\u3001\u305d\u306e\u969bSwitch\u30bf\u30b0\u3067\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u5148\u3092\u5207\u308a\u66ff\u3048\u308b\u3002\u307e\u305f\u3001\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u60c5\u5831\u306fRouter\u30bf\u30b0\u3067\u5236\u5fa1\u3055\u308c\u308b\u3002<br \/>\n\u5144\u5f1f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3078\u306e\u30c7\u30fc\u30bf\u306e\u3084\u308a\u3068\u308a\u306fuseContext\u30d5\u30c3\u30af\u3092\u7528\u3044\u308b\u3068\u52b9\u7387\u7684\u3002\u305d\u306e\u969b\u306f\u30b0\u30ed\u30fc\u30d0\u30eb\u30b9\u30c6\u30fc\u30c8\u306b\u30c7\u30fc\u30bf\u3092\u683c\u7d0d\u3059\u308b\u3002<br \/>\n\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u9001\u4fe1\u3059\u308b\u306b\u306fJSX\u306e\u30a4\u30d9\u30f3\u30c8\u306b\u76f4\u63a5\u66f8\u304d\u8fbc\u3080\u3002\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u53d6\u308b\u5834\u5408\u3001\u30d1\u30e9\u30e1\u30fc\u30bf\u306fuseParams\u3001\u30af\u30a8\u30ea\u30d1\u30e9\u30e1\u30fc\u30bf\u306fuseLocation\u30d5\u30c3\u30af\u3092\u305d\u308c\u305e\u308c\u4f7f\u7528\u3059\u308b\u3002<br \/>\n\u4e00\u3064\u524d\u306e\u753b\u9762\u306b\u623b\u308b\u5834\u5408\u306fuseHistory\u30d5\u30c3\u30af\u306egoBack\u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3059\u308b\u3002\u30a4\u30d9\u30f3\u30c8\u306fonClick\u3067\u5b9f\u884c\u3059\u308b\u3002<\/p>\n<p>\u6f14\u7fd2\uff17\u3000\u30b9\u30bf\u30a4\u30eb\u5236\u5fa1\uff08\u5199\u771f\u691c\u7d22\u30b7\u30b9\u30c6\u30e0\uff09<br \/>\nJS\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u9b45\u529b\u306f\u30b9\u30bf\u30a4\u30eb\u5c5e\u6027\u3082\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u5236\u5fa1\u3067\u304d\u308b\u3053\u3068\u3067\u3059\u3002\u305d\u3053\u3067\u3001Vue\u3001React\u3001Angular\u3067\u5148\u7a0b\u3068\u306f\u5927\u304d\u304f\u66f8\u304d\u76f4\u3057\u305f\u5199\u771f\u691c\u7d22\u30b7\u30b9\u30c6\u30e0\u306bfont-awesome\u306e\u30a2\u30a4\u30b3\u30f3\u3092\u4f7f\u3063\u3066\u6c17\u306b\u5165\u3063\u305f\u753b\u50cf\u3092\u300c\u3044\u3044\u306d\uff01\u300d\uff08\u30cf\u30fc\u30c8\u30a2\u30a4\u30b3\u30f3\u3092\u8d64\u306b\u7740\u8272\uff09\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u307f\u307e\u3057\u305f\u3002<br \/>\n\u306a\u304a\u3001font-awesome\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306f\u3001\u4e88\u3081\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u25cfReact\u3067\u30b9\u30bf\u30a4\u30eb\u3092\u5236\u5fa1\u3059\u308b<br \/>\n\u3067\u306f\u3001React\u3067\u3082\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3059\u3002React\u306e\u5834\u5408\u306fVue\u3088\u308a\u306f\u5358\u7d14\u3067\u3001\u901a\u5e38\u306eJavascript\u306e\u3088\u3046\u306b\u660e\u793a\u7684\u306b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30ea\u30c6\u30e9\u30eb\u5185\u306e\u5909\u6570\u306b\u5024\u3092\u4ee3\u5165\u3059\u308b\u3060\u3051\u3067\u5bfe\u5fdc\u3067\u304d\u307e\u3059\u3002<br \/>\n\u3067\u3059\u304c\u3001\u3044\u308d\u3044\u308d\u3068\u5bfe\u5fdc\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u554f\u984c\u304c\u3042\u308a\u307e\u3059\u3002\u3072\u3068\u307e\u305a\u306f\u3001React\u3067\u3082Font-awesome\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304a\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>React-lesson7.js<br \/>\nimport React,{ useState, useMemo } from &#8220;react&#8221;;<br \/>\nimport { FontAwesomeIcon } from &#8220;@fortawesome\/react-fontawesome&#8221;;<br \/>\nimport { faHeart } from &#8220;@fortawesome\/free-solid-svg-icons&#8221;;<br \/>\nimport CitiesJson from &#8216;..\/..\/json\/city.json&#8217;;<br \/>\nimport StatesJson from &#8216;..\/..\/json\/state.json&#8217;;<br \/>\nimport &#8216;.\/css\/style.css&#8217;;<\/p>\n<p>const World = ()=&gt;{<br \/>\n\/\/\u5b9a\u7fa9<br \/>\nconst countries= [<br \/>\n{id:1,code:&#8221;US&#8221;,name:&#8221;United States&#8221;},<br \/>\n{id:2,code:&#8221;JP&#8221;,name:&#8221;Japan&#8221;},<br \/>\n{id:3,code:&#8221;CN&#8221;,name:&#8221;China&#8221;},<br \/>\n]<br \/>\n\/\/const selecteditem = []<br \/>\nconst word = &#8220;&#8221;\u3000\/\/\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5b9a\u7fa9<br \/>\nconst active = &#8220;red&#8221;<br \/>\nconst cities = CitiesJson<br \/>\nconst states = StatesJson<br \/>\nconst act = &#8221;<br \/>\nconst [r_list_states, setListStates] = useState([]) \/\/\u9023\u52d5\u30d7\u30eb\u30c0\u30a6\u30f3\u306e\u30a8\u30ea\u30a2\u30aa\u30d7\u30b7\u30e7\u30f3<br \/>\nconst [r_sel_country,setSelCountry] = useState(&#8221;) \/\/\u9078\u629e\u3057\u305f\u56fd<br \/>\nconst [r_sel_state,setSelState] = useState(&#8221;) \/\/\u9078\u629e\u3057\u305f\u30a8\u30ea\u30a2<br \/>\nconst [r_word,setWord] = useState(&#8221;) \/\/\u9078\u629e\u3057\u305f\u6587\u5b57<br \/>\nconst [r_hit_cities_by_state,setHitCitiesByState] = useState([]) \/\/\u30a8\u30ea\u30a2\u306e\u691c\u7d22\u7d50\u679c<br \/>\nconst [r_hit_cities_by_word,setHitCitiesByWord] = useState([]) \/\/\u6587\u5b57\u306e\u691c\u7d22\u7d50\u679c<br \/>\nconst [r_hit_cities,setHitCities] = useState([]) \/\/\u8907\u5408\u691c\u7d22\u7d50\u679c<\/p>\n<p>\/\/\u30b9\u30bf\u30a4\u30eb\u5236\u5fa1<br \/>\nconst colorSet = (id)=&gt;{<br \/>\nconst hit_cities = [&#8230;r_hit_cities]<br \/>\nlet selecteditem = hit_cities.find((v)=&gt;{ return v.id === id })<br \/>\nlet ar_tmp = []<br \/>\nhit_cities.map((item,idx)=&gt;{<br \/>\nif(item.id === id){<br \/>\nif(selecteditem.act === active){<br \/>\nselecteditem.act = &#8221;<br \/>\n}else{<br \/>\nselecteditem.act = active<br \/>\n}<br \/>\n}<br \/>\n})<br \/>\nsetHitCities(hit_cities)<br \/>\n}<br \/>\n\/\/\u56fd\u540d\u3092\u9078\u629e<br \/>\nconst selectCountry = (e)=&gt;{<br \/>\nconst sel_country = e.target.value<br \/>\n\/\/\u30a8\u30ea\u30a2\u306e\u7d5e\u308a\u8fbc\u307f<br \/>\nconst opt_states = states.filter((v)=&gt;{ return v.country === sel_country})<br \/>\nsetListStates(opt_states)<br \/>\nsetSelCountry(sel_country)<br \/>\n}<br \/>\n\/\/\u30a8\u30ea\u30a2\u3092\u9078\u629e<br \/>\nconst selectState = (e)=&gt;{<br \/>\nconst sel_state = e.target.value \/\/\u9078\u629e\u3057\u305f\u30a8\u30ea\u30a2<br \/>\n\/\/\u30a8\u30ea\u30a2\u304b\u3089\u90fd\u5e02\u7d5e\u308a\u8fbc\u307f<br \/>\nconst hit_cities_by_state = cities.filter((v)=&gt;{ return v.state === sel_state })<br \/>\nsetHitCitiesByState(hit_cities_by_state)<br \/>\nsetSelState(sel_state)<br \/>\n}<br \/>\n\/\/\u30d5\u30ea\u30fc\u30ef\u30fc\u30c9\u691c\u7d22<br \/>\nconst searchWord = (e)=&gt;{<br \/>\nconst word = e.target.value<br \/>\nconst hit_cities_by_word = cities.filter((v)=&gt;{<br \/>\nconst item = v.name.replace(\/[A-Z]\/g, function(ch) {return String.fromCharCode(ch.charCodeAt(0) | 32);})<br \/>\nreturn item.includes(word) &amp;&amp; word<br \/>\n})<br \/>\nsetHitCitiesByWord(hit_cities_by_word)<br \/>\nsetWord(word)<br \/>\n}<br \/>\n\/\/\u691c\u7d22\u7d50\u679c\u306e\u540c\u671f<br \/>\nuseMemo(()=&gt;{<br \/>\nconst len_state = r_hit_cities_by_state.length<br \/>\nconst len_word = r_hit_cities_by_word.length<br \/>\nlet hits = []<br \/>\nif(len_state &gt; 0 &amp;&amp; len_word &gt; 0 ){<br \/>\nhits = require(&#8216;lodash&#8217;).intersection(r_hit_cities_by_state, r_hit_cities_by_word)<br \/>\n}else if(len_state &gt; 0){<br \/>\nhits = r_hit_cities_by_state<br \/>\n}else if(len_word &gt; 0){<br \/>\nhits = r_hit_cities_by_word<br \/>\n}else{<br \/>\nhits = []<br \/>\n}<br \/>\nsetHitCities(hits)<br \/>\n},[r_sel_state,r_word])<\/p>\n<p>\/\/\u30af\u30ea\u30a2<br \/>\nconst clear = ()=&gt;{<br \/>\nsetSelCountry(&#8221;)<br \/>\nsetSelState(&#8221;)<br \/>\nsetWord(&#8221;)<br \/>\nsetHitCitiesByState([])<br \/>\nsetHitCitiesByWord([])<br \/>\n}<br \/>\n\/\/\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u884c\u3046\u8a18\u8ff0<br \/>\nreturn (<br \/>\n&lt;&gt;<br \/>\n<label> \u56fd\u306e\u9078\u629e <\/label><br \/>\n<select onchange=\"{selectCountry}\"><option value=\"\">&#8212; \u56fd\u540d\u3092\u9078\u629e &#8212;<\/option>{countries.map((item)=&gt;<option value=\"{item.code}\">{item.name}<\/option>)<br \/>\n<\/select><br \/>\n<select onchange=\"{selectCountry}\">}<br \/>\n<\/select><\/p>\n<p><label> \u30a8\u30ea\u30a2\u306e\u9078\u629e<\/label><br \/>\n<select onchange=\"{selectState}\"><option>&#8212; \u30a8\u30ea\u30a2\u3092\u9078\u629e &#8212;<\/option>{<br \/>\n<\/select><br \/>\n<select onchange=\"{selectState}\">r_list_states.map((item,key)=&gt;{<br \/>\n<\/select><br \/>\n<select onchange=\"{selectState}\">return (<option value=\"{item.code}\"><\/option><\/select><br \/>\n<select onchange=\"{selectState}\"><option value=\"{item.code}\">{item.name}<\/option><\/select><br \/>\n<select onchange=\"{selectState}\"><option value=\"{item.code}\"><\/option>)<br \/>\n<\/select><br \/>\n<select onchange=\"{selectState}\">})<br \/>\n<\/select><br \/>\n<select onchange=\"{selectState}\">}<br \/>\n<\/select><\/p>\n<h4>\u691c\u7d22\u6587\u5b57\u3092\u5165\u529b\u3057\u3066\u304f\u3060\u3055\u3044<\/h4>\n<p><input id=\"word\" type=\"text\" value=\"{r_word}\" \/><br \/>\n<button type=\"button\">clear<\/button><\/p>\n<div>\u30d2\u30c3\u30c8\u6570\uff1a{r_hit_cities.length}\u4ef6<\/div>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>{<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>r_hit_cities.map((item,key)=&gt;{<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>return(<\/p>\n<li>\u3000\u3000\u3000\u3000 <label><br \/>\n{ item.name }<br \/>\n<label>{colorSet(item.id)}}&gt;<\/p>\n<p><\/label><br \/>\n<\/label><\/p>\n<p><img decoding=\"async\" src=\"{&#96;..\/..\/img\/${item.src}&#96;}\" alt=\"{\" name=\"\" \/><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>)<br \/>\n})<br \/>\n}<\/p>\n<p>&lt;\/&gt;<br \/>\n)<br \/>\n}<\/p>\n<p>export default World<\/p>\n<p>\u25cfFont-awesome\u3092\u5229\u7528\u3059\u308b<br \/>\nReact\u306e\u5834\u5408\u306ffas\u304c\u3069\u3046\u3082\u3046\u307e\u304f\u4f7f\u3048\u306a\u3044\u3088\u3046\u306a\u306e\u3067\u3001\u4f7f\u7528\u3057\u305f\u3044\u30a2\u30a4\u30b3\u30f3\u3092\u4e00\u3064\u4e00\u3064\u660e\u793a\u3057\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308a\u305d\u3046\u3067\u3059\u3002<\/p>\n<p>js<br \/>\nimport { FontAwesomeIcon } from &#8220;@fortawesome\/react-fontawesome&#8221;; \/\/Font-awesome\u306e\u5229\u7528<br \/>\nimport { faHeart } from &#8220;@fortawesome\/free-solid-svg-icons&#8221;; \/\/\u30cf\u30fc\u30c8\u30a2\u30a4\u30b3\u30f3<br \/>\n\/*\u4e2d\u7565*\/<br \/>\nconst HitsCity = (pr)=&gt;{<br \/>\nconst {colorSetstate,item } = pr \/\/pr\u306fprops\u306e\u3053\u3068<br \/>\nreturn(<\/p>\n<ul>\n<li>\u3000\u3000\u3000\u3000 <label><br \/>\n{ item.name }<br \/>\n<label>{colorSetstate()}}&gt;<\/p>\n<p><\/label><br \/>\n<\/label><\/li>\n<\/ul>\n<p>)<br \/>\n}<\/p>\n<p>\u3053\u308c\u3067\u30a2\u30a4\u30b3\u30f3\u304c\u30ea\u30b9\u30c8\u3054\u3068\u306b\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u540c\u69d8\u306b\u3001\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u306flabel\u30bf\u30b0\u306b\u7f6e\u304f\u65b9\u304c\u7121\u96e3\u3067\u3057\u3087\u3046\u3002\u307e\u305f\u3001\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u306f\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u4f1d\u64ad\u3055\u305b\u3066\u3044\u308b\u306e\u3067\u3001\u30a4\u30d9\u30f3\u30c8\u4f1d\u64ad\u7528\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\uff08colorSetstate\uff09\u3092\u7528\u610f\u3057\u3066\u304a\u304d\u307e\u3059\u3002\u307e\u305f\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u306e\u5834\u5408\u306fuseContext\u30d5\u30c3\u30af\u304c\u5229\u7528\u3067\u304d\u306a\u3044\u3088\u3046\u306a\u306e\u3067\u3001props\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u6e21\u3059\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002<br \/>\n\u307e\u305f\u3001\u30b9\u30bf\u30a4\u30eb\u5236\u5fa1\u306e\u90e8\u5206\u3067\u3059\u304c\u3001Vue\u3060\u3068\u30af\u30e9\u30b9\u540d\u3092\u8a18\u8ff0\u3057\u3066\u305d\u308c\u3092\u6709\u52b9\u3001\u7121\u52b9\u3067\u5207\u308a\u63db\u3048\u3066\u30b9\u30bf\u30a4\u30eb\u3092\u52d5\u7684\u306b\u5236\u5fa1\u3057\u3066\u3044\u307e\u3057\u305f\u304c\u3001React\u306e\u5834\u5408\u306f\u30b9\u30bf\u30a4\u30eb\u30bf\u30b0\u3092\u305d\u306e\u307e\u307e\u53cd\u6620\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\uff08\u9006\u306b\u3044\u3048\u3070\u3001\u30b9\u30bf\u30a4\u30eb\u306e\u6709\u52b9\u3001\u7121\u52b9\u5207\u308a\u63db\u3048\u306f\u9762\u5012\u3067\u3059\uff09\u3002<br \/>\n\u305d\u3057\u3066\u3001\u3053\u306e\u8a18\u8ff0\u90e8\u5206\u3067\u3059\u304c\u3001\u3053\u308c\u306fvue\u306e\u3088\u3046\u306a\u4e8c\u91cd\u30d6\u30e9\u30b1\u30c3\u30c8\u3067\u306f\u306a\u304f\u3001\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30ea\u30c6\u30e9\u30eb\u306e\u4e2d\u306b\u3001\u30b9\u30bf\u30a4\u30eb\u3092\u8a18\u8ff0\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u898b\u304b\u3051\u4e8c\u91cd\u306b\u898b\u3048\u3066\u3044\u308b\u3060\u3051\u3067\u3059\u3002\u3064\u307e\u308a<\/p>\n<p>js<\/p>\n<p>\u3068\u540c\u3058\u3053\u3068\u3067\u3059\u3002\u305d\u3057\u3066\u3001item.act\u306bcolor\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5024\u3092\u4ee3\u5165\u3059\u308b\u3060\u3051\u3067\u3001\u52d5\u7684\u5236\u5fa1\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002\u3067\u3059\u304c\u3001\u3082\u3046\u4e00\u3064\u843d\u3068\u3057\u7a74\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u25cf\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304b\u3089\u5024\u3092\u5236\u5fa1\u3059\u308b<br \/>\n\u7b2c4\u7ae0\u306e\u30c7\u30fc\u30bf\u306e\u4fee\u6b63\u306b\u3082\u3042\u3063\u305f\u901a\u308a\u3001\u95a2\u6570\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u5024\u3092\u4fee\u6b63\u3059\u308b\u306b\u306f\u3001\u5206\u5272\u4ee3\u5165\u304c\u5fc5\u9808\u3067\u3001\u3053\u308c\u3092\u5b9f\u65bd\u3057\u306a\u3044\u3068\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u5024\u3092\u30ea\u30a2\u30af\u30c6\u30a3\u30d6\u5236\u5fa1\u3067\u304d\u307e\u305b\u3093\u3002<br \/>\n\u307e\u305f\u3001\u30c7\u30fc\u30bf\u306e\u66f4\u65b0\u3067\u3059\u304c\u3001\u3053\u306e\u3088\u3046\u306b\u5206\u5272\u4ee3\u5165\u3067\u691c\u7d22\u7d50\u679c\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u5c55\u958b\u3057\u3001\u30b9\u30bf\u30a4\u30eb\u5236\u5fa1\u7528\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u5024\u3092\u4ee3\u5165\u3057\u3066\u304b\u3089\u5dee\u3057\u66ff\u3048\u308b\u3068\u3044\u3046\u65b9\u6cd5\u3092\u7528\u3044\u308b\u3053\u3068\u3067\u3001\u4efb\u610f\u306e\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u306b\u7d10\u4ed8\u3044\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u5024\u3092\u5dee\u3057\u66ff\u3048\u308b\u3053\u3068\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>js<br \/>\nconst active = &#8220;red&#8221; \/\/\u30b9\u30bf\u30a4\u30eb\u8272<br \/>\n\/\/\u30b9\u30bf\u30a4\u30eb\u5236\u5fa1<br \/>\n\/\/\u30b9\u30bf\u30a4\u30eb\u5236\u5fa1<br \/>\nconst colorSet = (id)=&gt;{<br \/>\nconst hit_cities = [&#8230;r_hit_cities]<br \/>\nlet selecteditem = hit_cities.find((v)=&gt;{ return v.id === id })<br \/>\nlet ar_tmp = []<br \/>\nhit_cities.map((item,idx)=&gt;{<br \/>\nif(item.id === id){<br \/>\nif(selecteditem.act === active){<br \/>\nselecteditem.act = &#8221;<br \/>\n}else{<br \/>\nselecteditem.act = active<br \/>\n}<br \/>\n}<br \/>\n})<br \/>\nsetHitCities(hit_cities) \/\/\u540c\u671f\u3092\u3068\u308b<br \/>\n}<\/p>\n<p>\u25cfuseMemo\u30d5\u30c3\u30af\u306b\u3064\u3044\u3066<br \/>\n\u3053\u306e\u5199\u771f\u691c\u7d22\u30b7\u30b9\u30c6\u30e0\u306b\u306fuseMemo\u3068\u3044\u3046\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u306e\u30d5\u30c3\u30af\u306fuseEffect\u3068\u4f3c\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u3069\u3061\u3089\u304b\u3068\u3044\u3046\u3068Vue\u306e\u76e3\u8996\u30d7\u30ed\u30d1\u30c6\u30a3\u3063\u307d\u3044\u50cd\u304d\u3092\u3059\u308b\u3001\u51e6\u7406\u3055\u308c\u305f\u5024\u3092\u8a18\u61b6\u3057\u3066\u304a\u304f\u30d5\u30c3\u30af\u3067\u3001\u4e00\u5b9a\u306e\u51e6\u7406\u306b\u3088\u3063\u3066\u66f4\u65b0\u3055\u308c\u3001\u5e38\u6642\u8868\u793a\u3057\u3066\u304a\u304d\u305f\u3044\u5024\uff08\u3053\u3053\u3067\u306fr_hit_cities\u3068\u3044\u3046\u691c\u7d22\u7d50\u679c\u60c5\u5831\uff09\u306b\u5bfe\u3057\u3001\u5bfe\u8c61\u3068\u306a\u308b\u30c7\u30fc\u30bf\u306b\u7d10\u3065\u3051\u51e6\u7406\u3092\u5b9f\u884c\u3055\u305b\u308b\u3082\u306e\u3067\u3001\u3053\u308c\u3092\u5b9f\u88c5\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001\u691c\u7d22\u7d50\u679c\u304c\u5909\u66f4\u3055\u308c\u305f\u5834\u5408\u306e\u307f\u3001\u8ad6\u7406\u7a4d\u8a08\u7b97\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u306b\u306a\u308b\u306e\u3067\u3001\u51e6\u7406\u80fd\u7387\u304c\u6539\u5584\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>js<br \/>\nimport React,{ useState, useEffect, useMemo } from &#8220;react&#8221;;<br \/>\nuseMemo(()=&gt;{<br \/>\n\/\/\u5b9f\u884c\u3057\u305f\u3044\u51e6\u7406<br \/>\n},[\u76e3\u8996\u3057\u305f\u3044\u30c7\u30fc\u30bf]}<\/p>\n<p>\u203b\u307e\u305f\u3001\u3053\u306e\u3088\u3046\u306b\u53c2\u7167\u7d50\u679c\u3092\u8fd4\u3057\u305f\u3044\u3060\u3051\u306a\u3089\u3001\u623b\u308a\u5024\u3092\u8a2d\u5b9a\u3059\u308b\u3053\u3068\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>js<br \/>\nimport React,{ useState, useEffect, useMemo } from &#8220;react&#8221;;<br \/>\nconst r_hit_cities = useMemo(()=&gt;{<br \/>\n\/\/\u5b9f\u884c\u3057\u305f\u3044\u51e6\u7406<br \/>\nreturn hits \/\/\u51e6\u7406\u306b\u3088\u3063\u3066\u7b97\u51fa\u3055\u308c\u305f\u5024<br \/>\n},[\u76e3\u8996\u3057\u305f\u3044\u30c7\u30fc\u30bf]}<\/p>\n<p>\u203b\u3061\u306a\u307f\u306b\u3053\u306e\u30b7\u30b9\u30c6\u30e0\u3092useEffect\u30d5\u30c3\u30af\u306b\u3057\u3066\u3082\u52d5\u4f5c\u3057\u307e\u3059\u304c\u3001\u9010\u4e00\u691c\u7d22\u306b\u53cd\u5fdc\u3057\u3066\u3057\u307e\u3046\u306e\u3067\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306f\u3060\u3044\u3076\u843d\u3061\u307e\u3059\u3002<\/p>\n<p>\u6f14\u7fd2\uff18\uff1aTypeScript\uff08Todo\u30a2\u30d7\u30ea\uff09<br \/>\n\u3067\u306f\u3001React\u3067\u3082typeScript\u3067\u8a18\u8ff0\u3057\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002React\u306f\u5272\u308a\u3068\u65e9\u3044\u6bb5\u968e\u304b\u3089TypeScript\u3078\u306e\u9806\u5fdc\u3092\u59cb\u3081\u3066\u3044\u305f\u306e\u3067\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u66f8\u304d\u63db\u3048\u308b\u3060\u3051\u3067\u5bfe\u5fdc\u3057\u3066\u304f\u308c\u307e\u3059\u3002\u307e\u305f\u3001\u62e1\u5f35\u5b50\u306ftsx\u3068\u3044\u3046\u72ec\u81ea\u306e\u898f\u683c\u3068\u306a\u308a\u307e\u3059\u3002\u3061\u306a\u307f\u306bFc\u306fFunction Component\u306e\u7565\u3067React\u3067TypeScript\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u306e\u95a2\u6570\u578b\u5b9a\u7fa9\u5ba3\u8a00\u3067\u3059\u3002<br \/>\n\u203b\u6628\u4eca\u306eReact18\u3067\u306f\u5225\u306b\u4f7f\u7528\u3057\u306a\u304f\u3066\u3082\u554f\u984c\u306a\u3044\u3088\u3046\u3067\u3059\u304c\u2026\u3002<\/p>\n<p>tsx.App<br \/>\nimport React,{ Fc } from &#8216;react&#8217;;<\/p>\n<p>Const App: Fc = ()=&gt;{<br \/>\n\/*\u3053\u3053\u306b\u51e6\u7406\u3092\u66f8\u3044\u3066\u3044\u304f*\/<br \/>\n}<br \/>\nexport default App<\/p>\n<p>\u3080\u3057\u308d\u3001React\u306eTypeScript\u306b\u304a\u3044\u3066\u30cd\u30c3\u30af\u3068\u306a\u3063\u3066\u3044\u304f\u306e\u306f\u30d5\u30c3\u30af\u306e\u4f7f\u7528\u304c\u304b\u306a\u308a\u7169\u96d1\u306b\u306a\u308b\u3068\u3044\u3046\u70b9\u3067\u3001\u7279\u306buseContext\u30d5\u30c3\u30af\u3042\u305f\u308a\u306f\u76f8\u5f53\u53b3\u683c\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>Todo\u30a2\u30d7\u30ea\u306e\u69cb\u6210<br \/>\nTodo\u30a2\u30d7\u30ea\u306e\u69cb\u6210\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u5143\u306b\u306a\u3063\u305f\u8a18\u4e8b\u306f\u4ee5\u4e0b\u306e\u901a\u308a\uff08\u5143\u306e\u8a18\u4e8b\u306fVue\u3067\u4f5c\u6210\uff09\u3067\u3001\u6700\u4f4e\u9650\u306e\u6a5f\u80fd\u3060\u3051\u52d5\u304f\u3088\u3046\u306b\u3057\u3066React\u3067\u518d\u69cb\u7bc9\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\nhttps:\/\/qiita.com\/azukiazusa\/items\/205ae0cc5378419b1337<\/p>\n<p>txt<br \/>\n\u25a0Src<br \/>\n\u25a0components<br \/>\n&#8211; Apptodo.tsx<br \/>\n&#8211; App.tsx<br \/>\n&#8211; DetailTodo.tsx<br \/>\n&#8211; EditTodo.tsx<br \/>\n&#8211; Todo.tsx<br \/>\n&#8211; TodoItem.tsx<br \/>\n\u25a0types<br \/>\n&#8211; TodoType.ts<br \/>\nApp.tsx<br \/>\nReducers.js \/\/\u5404\u7a2e\u5236\u5fa1<\/p>\n<p>App\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<br \/>\nApp.tsx\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u3053\u3067\u4e00\u756a\u6ce8\u610f\u305b\u306d\u3070\u306a\u3089\u306a\u3044\u306e\u306fuseContext\u30d5\u30c3\u30af\u306e\u578b\u6307\u5b9a\u3067\u3001\u4eca\u307e\u3067\u306eJSX\u306a\u3089\u3070\u3001createContext\u30e1\u30bd\u30c3\u30c9\u306e\u5f15\u6570\u306f\u4e0d\u8981\u3067\u3057\u305f\u304c\u3001TypeScript\u3067\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092\u4f5c\u6210\u3059\u308b\u5834\u5408\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u53d7\u3051\u6e21\u3059\u5bfe\u8c61\u3068\u306a\u308b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5bfe\u3057\u3066\u3001\u578b\u3092\u4e00\u81f4\u3055\u305b\u306a\u3044\u3068\u3044\u3051\u307e\u305b\u3093\u3002<br \/>\n\/\/useContext\u7528\u306b\u4e00\u81f4\u3055\u305b\u305f\u3044\u578b<br \/>\nconst defaultContext: Reducer={<br \/>\naddTodo: ()=&gt; {},<br \/>\nupdTodo: ()=&gt; {},<br \/>\ndelTodo: ()=&gt; {},<br \/>\ntodos:[ ],<br \/>\n}<br \/>\n\/\/\u521d\u671f\u5024\u306b\u578b\u3092\u4e00\u81f4\u3055\u305b\u306a\u3044\u3068\u30a8\u30e9\u30fc\u3068\u306a\u308b<br \/>\nexport const TodoContext = createContext(defaultContext)<br \/>\nconst App: FC =()=&gt;{<br \/>\nconst context = useContext(TodoContext)<br \/>\nreturn(<\/p>\n<p>)<br \/>\n}<br \/>\nexport default App;<\/p>\n<p>\u307e\u305f\u3001\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306freatct-router-dom6\u3092\u4f7f\u7528\u3057\u3066\u304a\u308a\u3001\u4eca\u307e\u3067\u3068\u306f\u5927\u5e45\u306b\u8a18\u8ff0\u65b9\u6cd5\u304c\u5909\u308f\u3063\u3066\u3044\u308b\uff08\u5f8c\u65b9\u4e92\u63db\u6027\u3082\u306a\u3044\uff09\u306e\u3067\u6ce8\u610f\u3067\u3059\u3002<\/p>\n<p>App.tsx<br \/>\nimport { Fc,createContext,useContext,useReducer } from &#8216;react&#8217;;<br \/>\nimport {BrowserRouter as Router, Route,Routes } from &#8216;react-router-dom&#8217;<br \/>\nimport Todo from &#8216;.\/components\/Todo&#8217;<br \/>\nimport AddTodo from &#8216;.\/components\/AddTodo&#8217;<br \/>\nimport EditTodo from &#8216;.\/components\/EditTodo&#8217;<br \/>\nimport DetailTodo from &#8216;.\/components\/DetailTodo&#8217;<br \/>\nimport todoReducer from &#8216;.\/reducers.js&#8217;<br \/>\nimport {Data,Reducer} from &#8216;.\/types\/todotype.ts&#8217;<br \/>\nimport &#8216;.\/Styles.css&#8217;<br \/>\n\/\/useContext\u7528\u306b\u4e00\u81f4\u3055\u305b\u305f\u3044\u578b<br \/>\nconst defaultContext: Reducer={<br \/>\naddTodo: ()=&gt; {},<br \/>\nupdTodo: ()=&gt; {},<br \/>\ndelTodo: ()=&gt; {},<br \/>\ntodos:[ ],<br \/>\n}<\/p>\n<p>export const TodoContext = createContext(defaultContext)<br \/>\nconst App: FC =()=&gt;{<br \/>\nconst context = useContext(TodoContext)<br \/>\nconst iniData:Data = []<br \/>\nconst [todos,dispatch] = useReducer(todoReducer,iniData)<br \/>\nconst addTodo = (dif:Data)=&gt;{<br \/>\ndispatch({type:&#8221;ADD_TODO&#8221;,data:{dif:dif}})<br \/>\n}<br \/>\nconst updTodo = (id:char,dif:Data)=&gt;{<br \/>\ndispatch({type:&#8221;UPD_TODO&#8221;,data:{id:id, dif:dif}})<br \/>\n}<br \/>\nconst delTodo = (id:char)=&gt;{<br \/>\ndispatch({type:&#8221;DEL_TODO&#8221;,data:{id:id}})<br \/>\n}<br \/>\nreturn (<\/p>\n<p>} \/&gt;<br \/>\n} \/&gt;<br \/>\n} \/&gt;<br \/>\n} \/&gt;<\/p>\n<p>);<br \/>\n}<br \/>\nexport default App;<\/p>\n<p>Todo\u30ea\u30b9\u30c8\u3092\u5236\u5fa1\u3059\u308b<br \/>\nTodo\u30ea\u30b9\u30c8\u3092\u5236\u5fa1\u3059\u308b\u306e\u306f\u4e00\u89a7\u3092\u4f5c\u6210\u3059\u308bTodo.tsx\u3068\u5404Todo\u3092\u4f5c\u6210\u3059\u308bTodoItem.tsx\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>Todo.tsx<br \/>\nimport {Fc,useContext} from &#8216;react&#8217;;<br \/>\nimport {NavLink } from &#8216;react-router-dom&#8217;<br \/>\nimport TodoItem from &#8216;.\/TodoItem&#8217;<br \/>\nimport {TodoContext} from &#8216;..\/App&#8217; \/\/\u7d10\u4ed8\u3051\u305f\u30b3\u30f3\u30c6\u30af\u30b9\u30c8<br \/>\nconst Todo: FC = ()=&gt;{<br \/>\nconst context = useContext(TodoContext) \/\/\u30b3\u30f3\u30c6\u30af\u30b9\u30c8\u3092\u547c\u3073\u51fa\u3059<br \/>\nreturn(<br \/>\n&lt;&gt;<\/p>\n<h2>TODO\u4e00\u89a7<\/h2>\n<p>{context.todos.map((item,i)=&gt;{<br \/>\nreturn(<\/p>\n<p>)<br \/>\n})}<br \/>\n\u65b0\u898f\u4f5c\u6210 &lt;\/&gt;<br \/>\n)<br \/>\n}<\/p>\n<p>export default Todo;<\/p>\n<p>\u5404Todo\u306e\u5236\u5fa1<br \/>\n\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3082\u540c\u69d8\u306b\u30b3\u30f3\u30c6\u30af\u30b9\u30c8\u304b\u3089\u53d6\u5f97\u3067\u304d\u307e\u3059\u304c\u3001\u5909\u6570todo\u306f\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u306eprop\u304b\u3089\u53d6\u5f97\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>TodoItem.tsx<br \/>\nimport {FC,useContext} from &#8216;react&#8217;;<br \/>\nimport {NavLink } from &#8216;react-router-dom&#8217;<br \/>\nimport {TodoContext} from &#8216;..\/App&#8217;<\/p>\n<p>\/\/\u5404ToDO\u30a2\u30a4\u30c6\u30e0\u306e\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<br \/>\nconst TodoItem: FC = (props)=&gt;{<br \/>\nconst context = useContext(TodoContext)<br \/>\nconst {todo} = props<br \/>\nreturn(<br \/>\n&lt;&gt;<\/p>\n<div>\n<div>{todo.title}<br \/>\n{todo.str_status}<\/div>\n<div>formatDate<\/div>\n<div><button>{context.updTodo(todo.id)}} &gt;\u4fee\u6b63<\/button><br \/>\n<button>{context.delTodo(todo.id)}} &gt;\u524a\u9664<\/button><\/div>\n<\/div>\n<p>&lt;\/&gt;<br \/>\n)<br \/>\n}<\/p>\n<p>export default TodoItem;<\/p>\n<p>CRUD\u5236\u5fa1\u3059\u308b<br \/>\n\u3067\u306fReact\u3067CRUD\u5236\u5fa1\u3092\u3057\u3066\u3044\u304d\u307e\u3059\u3002\u305d\u3057\u3066\u3001\u3053\u306eCRUD\u6a5f\u80fd\u306f\u304b\u306a\u308aTypeScript\u306e\u6069\u6075\u3092\u53d7\u3051\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u306a\u305c\u306a\u3089\u3001\u7a7a\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30c7\u30fc\u30bf\u306b\u5bfe\u3057\u3066\u3082\u3001\u5024\u306e\u8a18\u8ff0\u306b\u5bfe\u3057\u3066\u5236\u5fa1\u3092\u304b\u3051\u3089\u308c\u308b\u304b\u3089\u3067\u3001\u3088\u308a\u53b3\u683c\u306b\u5024\u306e\u5236\u5fa1\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Todo\u3092\u65b0\u898f\u767b\u9332\u3059\u308b<br \/>\n\u65b0\u898f\u767b\u9332\u3059\u308b\u305f\u3081\u306e\u5236\u5fa1\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u305d\u3057\u3066\u3001React\u306b\u304a\u3044\u3066\u6ce8\u610f\u3057\u306a\u3051\u308c\u3070\u3044\u3051\u306a\u3044\u306e\u304c\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u30d5\u30a9\u30fc\u30e0\u3092\u5236\u5fa1\u3059\u308b\u305f\u3081\u306b\u306f\u3001useState\u30d5\u30c3\u30af\u304c\u5fc5\u9808\u3068\u306a\u308a\u307e\u3059\u3002\u3067\u3059\u304c\u3001\u30d5\u30a9\u30fc\u30e0\u6570\u306b\u6bd4\u4f8b\u3057\u3066useState\u30d5\u30c3\u30af\u3092\u305a\u3089\u305a\u3089\u3068\u4e26\u3079\u308b\u306e\u306f\u52b9\u7387\u304c\u60aa\u3044\u306e\u3067\u3001\u4e0b\u8a18\u30ea\u30f3\u30af\u958b\u767a\u7cfb\u30d6\u30ed\u30b0\u306e\u8a18\u8ff0\u3092\u53c2\u8003\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>state\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u578b\u306b\u3057\u3066\u3001state\u306e\u66f4\u65b0\u51e6\u7406\u3092\u5171\u901a\u5316\uff081\u3064\u306b\uff09\u3059\u308b<\/p>\n<p>\u307e\u305f\u3001\u5404\u7a2e\u30d5\u30a9\u30fc\u30e0\u7528\u306e\u5236\u5fa1\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5bfe\u3057\u3001\u521d\u671f\u5024\u3092\u8a2d\u5b9a\u3057\u3066\u304a\u304b\u306a\u3044\u3068\u578b\u4e0d\u4e00\u81f4\u306e\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3059\u308b\u306e\u3067\u3001useState\u30d5\u30c3\u30af\u306b\u521d\u671f\u5024initial\u3092\u4ee3\u5165\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u305d\u308c\u304b\u3089\u3001useEffect\u30d5\u30c3\u30af\u3084useCallback\u30d5\u30c3\u30af\u3092\u5229\u7528\u3059\u308b\u969b\u306b\u306f\u4f9d\u5b58\u95a2\u4fc2\u3092\u53b3\u683c\u5316\u3057\u3066\u304a\u304b\u306a\u3044\u3068\u8b66\u544a\u304c\u51fa\u308b\u305f\u3081\u3001\u66f8\u304d\u65b9\u304c\u304b\u306a\u308a\u7169\u96d1\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u3069\u306e\u5909\u6570\u3092\u4ee3\u5165\u3057\u3066\u304a\u304f\u304b\u60a9\u307f\u307e\u3059\u304c\u3001\u4f9d\u5b58\u95a2\u4fc2\u3068\u3044\u3046\u306e\u304c\u30d2\u30f3\u30c8\u3067\u3001\u3053\u306e\u5909\u6570\u304c\u518d\u4ee3\u5165\u3055\u308c\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001\u8a08\u7b97\u3055\u308c\u308b\u5024\u304c\u5165\u308c\u66ff\u308f\u308b\u90e8\u5206\u304c\u76ee\u306e\u4ed8\u3051\u6240\u3068\u306a\u308a\u307e\u3059\u3002\u3057\u305f\u304c\u3063\u3066\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u306egetRandomId\u306f\u5909\u6570date\uff08useRef\u30d5\u30c3\u30af\u306e\u5024\u306f\u5f15\u6570\u3067\u5236\u5fa1\u3055\u308c\u3066\u3044\u307e\u3059\uff09\u3001useEffect\u30d5\u30c3\u30af\u306fuseRef\u306b\u3088\u3063\u3066\u7528\u610f\u3055\u308c\u305finputRef\u3068\u898b\u843d\u3068\u3057\u304c\u3061\u3067\u3059\u304c\u3001\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u95a2\u6570\u305d\u306e\u3082\u306e\u3068\u306a\u308a\u307e\u3059\u3002<br \/>\n\u203bReact18\u306e\u958b\u767a\u30e2\u30fc\u30c9\u3060\u3068useEffect\u30d5\u30c3\u30af\u304c\u4e8c\u56de\u767a\u52d5\u3055\u308c\u308b\u3088\u3046\u3067\u3059\u3002\u80af\u5b9a\u7684\u306a\u610f\u898b\u304c\u591a\u3044\u3067\u3059\u304c\u3001\u30b3\u30f3\u30c6\u30af\u30b9\u30c8\u3092\u6301\u3064\u5168\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306euseEffect\u30d5\u30c3\u30af\u304c\u5e72\u6e09\u3057\u3066\u3057\u307e\u3046\uff08\u3053\u306eTodo\u30a2\u30d7\u30ea\u306e\u5834\u5408AooTodo.tsx\u3060\u3051\u5bfe\u5fdc\u3057\u3066\u3082\u4e8c\u91cd\u306b\u767b\u9332\u3055\u308c\u3066\u3057\u307e\u3046\uff09\u306e\u3067\u3001\u81ea\u5206\u3068\u3057\u3066\u306f\u3053\u308c\u306f\u3069\u3046\u306a\u306e\u304b\u304b\u3068\u306f\u601d\u3046\u3093\u3067\u3059\u304c\u2026\u3002<\/p>\n<p>AddTodo.tsx<br \/>\nimport { FC,useState,useContext,useEffect,useMemo,useCallback,useRef } from &#8216;react&#8217;;<br \/>\nimport {TodoContext} from &#8216;..\/App&#8217;<br \/>\nimport {useNavigate } from &#8216;react-router-dom&#8217;<br \/>\nimport {Params,Data,Reducer} from &#8216;.\/types\/todotype.ts&#8217;<\/p>\n<p>const AddTodo: FC = () =&gt; {<br \/>\nconst date = useMemo(()=&gt;{<br \/>\nreturn new Date()<br \/>\n},[])<br \/>\nconst initial:Params = {<br \/>\ntitle: &#8221;,<br \/>\ndescription: &#8221;,<br \/>\nstr_status:&#8217;waiting&#8217;<br \/>\n}<br \/>\nconst [d_item,setItem] = useState(initial)<br \/>\nconst context = useContext(TodoContext)<br \/>\nconst inputRef = useRef(null)<br \/>\nconst navigate = useNavigate()<br \/>\nconst didLogRef = useRef(false)<br \/>\nconst getRandomId = useCallback((ref)=&gt;{<br \/>\nif (ref.current?.value === &#8220;&#8221;) {<br \/>\nconst randomid = date.getTime()<br \/>\nref.current.value = randomid<br \/>\n}<br \/>\n},[date])<br \/>\nuseEffect(()=&gt;{<br \/>\nif(didLogRef.current === false){<br \/>\ngetRandomId(inputRef)<br \/>\ndidLogRef.current = true<br \/>\n}<br \/>\n},[inputRef,getRandomId])<\/p>\n<p>\/\/\u66f4\u65b0<br \/>\nconst hundle = (e)=&gt;{<br \/>\nconst {name,value} = e.target<br \/>\nsetItem({&#8230;d_item,[name]:value})<br \/>\n}<br \/>\n\/\/\u66f4\u65b0\u30dc\u30bf\u30f3\u62bc\u4e0b\u30a4\u30d9\u30f3\u30c8<br \/>\nconst onSubmit = ()=&gt;{<br \/>\nconst id =inputRef.current.value<br \/>\ncontext.addTodo({&#8230;d_item,id})<br \/>\nnavigate(&#8216;\/&#8217;) \/\/\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306b\u9077\u79fb<br \/>\n}<br \/>\nreturn (<br \/>\n&lt;&gt;<\/p>\n<h2>TODO\u306e\u4f5c\u6210<\/h2>\n<div><input name=\"id\" readonly=\"readonly\" type=\"text\" \/><\/div>\n<div><label> \u30bf\u30a4\u30c8\u30eb<\/label><br \/>\n<input id=\"title\" name=\"title\" type=\"text\" value=\"{d_item.title}\" \/><\/div>\n<div><label><\/label><br \/>\n<textarea id=\"description\" name=\"description\">        &lt;\/div&gt;<br \/>\n&lt;div&gt;<br \/>\n          &lt;label&gt;\u30b9\u30c6\u30fc\u30bf\u30b9&lt;\/label&gt;&lt;br \/&gt;<br \/>\n          &lt;select id=&#8221;status&#8221; name=&#8221;str_status&#8221; onChange={hundle} &gt;&lt;option value=&#8221;waiting&#8221;&gt;waiting&lt;\/option&gt;&lt;option value=&#8221;working&#8221;&gt;working&lt;\/option&gt;&lt;option value=&#8221;completed&#8221;&gt;completed&lt;\/option&gt;&lt;option value=&#8221;pending&#8221;&gt;pending&lt;\/option&gt;&lt;\/select&gt;<br \/>\n        &lt;\/div&gt;<br \/>\n&lt;p&gt;        &lt;button onClick={()=&gt;onSubmit()}&gt;\u4f5c\u6210\u3059\u308b&lt;\/button&gt;&lt;br \/&gt;<br \/>\n    &lt;\/&gt;&lt;br \/&gt;<br \/>\n\t)&lt;br \/&gt;<br \/>\n}&lt;\/p&gt;<br \/>\n&lt;p&gt;export default AddTodo;&lt;\/p&gt;<br \/>\n&lt;p&gt;useRef\u30d5\u30c3\u30af\uff08React18\u3067\u306e\u7528\u9014\uff09&lt;br \/&gt;<br \/>\n\u3053\u306e\u30b7\u30b9\u30c6\u30e0\u3067\u306fuseRef\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u304a\u308a\u3001\u30e9\u30f3\u30c0\u30e0\u3067\u4f5c\u6210\u3055\u308c\u308bid\u756a\u53f7\u3092\u30d5\u30a9\u30fc\u30e0\u4e0a\u306b\u53c2\u7167\u3055\u305b\u3066\u3044\u307e\u3059\u3002useRef\u30d5\u30c3\u30af\u306f\u8981\u7d20\u3078\u306e\u53c2\u7167\u3092\u7c21\u6f54\u306b\u3059\u308b\u3082\u306e\u3067\u3059\u3002\u307e\u305f\u3001React17\u307e\u3067\u306f\u30b9\u30c6\u30fc\u30c8\u3092\u7ba1\u7406\u3059\u308b\u306e\u306b\u3082\u7528\u3044\u3089\u308c\u305f\u308a\u3057\u3066\u3044\u307e\u3057\u305f\u3002&lt;br \/&gt;<br \/>\nimport { Fc,useState,useContext,useEffect,useRef } from &#8216;react&#8217;;&lt;br \/&gt;<br \/>\n  const inputRef = useRef&lt;HTMLInputElement&gt;(null)&lt;br \/&gt;<br \/>\n  const getRandomId = ()=&gt;{&lt;br \/&gt;<br \/>\n    if (inputRef.current?.value === &#8220;&#8221;) {&lt;br \/&gt;<br \/>\n      inputRef.current.value = date.getTime() \/\/\u30bf\u30a4\u30e0\u30b9\u30bf\u30f3\u30d7\u3092\u3082\u3068\u306b\u6570\u5024\u5316&lt;br \/&gt;<br \/>\n    }&lt;br \/&gt;<br \/>\n  }&lt;br \/&gt;<br \/>\n  useEffect(()=&gt;{&lt;br \/&gt;<br \/>\n    getRandomId() \/\/\u753b\u9762\u9077\u79fb\u5f8c\u306b\u5024\u3092\u4f5c\u6210\u3059\u308b&lt;br \/&gt;<br \/>\n  },[])&lt;br \/&gt;<br \/>\n  return(&lt;br \/&gt;<br \/>\n         &lt;input type=&#8221;text&#8221; ref={inputRef} readOnly \/&gt;&lt;br \/&gt;<br \/>\n  )&lt;\/p&gt;<br \/>\n&lt;p&gt;\u3068\u3053\u308d\u304c\u3001React18\u306b\u304a\u3044\u3066\u30b9\u30c6\u30fc\u30c8\u7ba1\u7406\u306e\u305f\u3081\u306buseRef\u3092\u7528\u3044\u308b\u306e\u306f\u30d0\u30c3\u30c9\u30ce\u30a6\u30cf\u30a6\u306b\u306a\u3063\u305f\u3088\u3046\u3067\u3059\u3002&lt;br \/&gt;<br \/>\nhttps:\/\/qiita.com\/uhyo\/items\/6a3b14950c1ef6974024&lt;br \/&gt;<br \/>\n\u3067\u306f\u3001\u3053\u306euseRef\u306fReact18\u3067\u306f\u304a\u5f79\u5fa1\u514d\u306b\u306a\u308b\u306e\u304b\u3068\u601d\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u4ee5\u4e0b\u306e\u8a18\u4e8b(\u82f1\u6587)\u3092\u8aad\u3081\u3070\u3001\u4efb\u610f\u306b\u521d\u671f\u5024\u3092\u8a2d\u5b9a\u3057\u305f\u308a\u3059\u308b\u5834\u5408\uff08\u3064\u307e\u308a\u3001\u30b9\u30c6\u30fc\u30c8\u3092\u7ba1\u7406\u3059\u308b\u305f\u3081\u306b\u7528\u3044\u308b\u306e\u3067\u306f\u306a\u304f\u3001\u4e71\u6570\u306a\u3069\u306e\u521d\u671f\u5024\u3092\u30d5\u30a9\u30fc\u30e0\u4e0a\u306b\u8a2d\u5b9a\u3057\u305f\u308a\u3059\u308b\u306e\u306b\u7528\u3044\u308b\uff09\u306b\u9069\u3057\u3066\u3044\u308b\u3068\u306e\u56de\u7b54\u3067\u3057\u305f\u3002\u3057\u305f\u304c\u3063\u3066\u3001\u4eca\u56de\u306fTodo\u30ea\u30b9\u30c8\u3092\u7ba1\u8f44\u3059\u308bid\u306e\u8a2d\u5b9a\u306b\u7528\u3044\u3066\u3044\u307e\u3059\u3002&lt;br \/&gt;<br \/>\nReact v18: useRef \u2014 What, When and Why?&lt;\/p&gt;<br \/>\n&lt;p&gt;\u4fee\u6b63\u30da\u30fc\u30b8\u3092\u4f5c\u6210\u3059\u308b&lt;br \/&gt;<br \/>\n\u4fee\u6b63\u30da\u30fc\u30b8\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5236\u5fa1\u3057\u307e\u3059\u3002\u767b\u9332\u30da\u30fc\u30b8\u3068\u306e\u9055\u3044\u306f\u30da\u30fc\u30b8\u9077\u79fb\u76f4\u5f8c\u306b\u3001\u5404\u7a2e\u30d5\u30a9\u30fc\u30e0\u306b\u5024\u3092\u53cd\u6620\u3055\u305b\u308b\u5fc5\u8981\u304c\u3042\u308b\u306e\u3067\u3001useEffect\u30d5\u30c3\u30af\u3068useCallback\u30d5\u30c3\u30af\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b3\u30f3\u30b9\u30c8\u30e9\u30af\u30bf\u4ee3\u308f\u308a\u306e\u52d5\u4f5c\u3092\u518d\u73fe\u3057\u3066\u3044\u307e\u3059\u3002\u4e00\u65b9\u3067\u3001\u578b\u306f\u53d6\u5f97\u3057\u305f\u5909\u6570\u304b\u3089\u7d99\u627f\u3067\u304d\u308b\u306e\u3067\u3001useState\u30d5\u30c3\u30af\u306e\u521d\u671f\u5024\u3092\u4ee3\u5165\u3059\u308b\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002&lt;\/p&gt;<br \/>\n&lt;p&gt;EditTodo.tsx&lt;br \/&gt;<br \/>\nimport React,{ FC,useState,useContext,useEffect,useCallback,useMemo } from &#8216;react&#8217;;&lt;br \/&gt;<br \/>\nimport {TodoContext} from &#8216;..\/App'&lt;br \/&gt;<br \/>\nimport {useParams,useNavigate } from &#8216;react-router-dom'&lt;br \/&gt;<br \/>\nimport {Data,Reducer} from &#8216;.\/types\/todotype.ts'&lt;\/p&gt;<br \/>\n&lt;p&gt;const EditTodo: FC = () =&gt; {&lt;br \/&gt;<br \/>\n  const [d_item,setItem] = useState&lt;Data&gt;([])&lt;br \/&gt;<br \/>\n  const context = useContext&lt;Reducer&gt;(TodoContext)&lt;br \/&gt;<br \/>\n  const navigate = useNavigate()&lt;br \/&gt;<br \/>\n  const params = useParams() \/\/\u30d1\u30e9\u30e1\u30fc\u30bf\u304b\u3089id\u53d6\u5f97&lt;br \/&gt;<br \/>\n  const params_id = useMemo(()=&gt;{&lt;br \/&gt;<br \/>\n     return Number(params.id)&lt;br \/&gt;<br \/>\n  },[params])&lt;br \/&gt;<br \/>\n  const getCallback = useCallback( (ctx)=&gt;{&lt;br \/&gt;<br \/>\n    const item = ctx.todos.find((item:Data)=&gt;item.id === params_id)&lt;br \/&gt;<br \/>\n    setItem(item)&lt;br \/&gt;<br \/>\n  },[params_id])&lt;br \/&gt;<br \/>\n  useEffect(()=&gt;&lt;br \/&gt;<br \/>\n    getCallback(context)&lt;br \/&gt;<br \/>\n   ,[getCallback,context])&lt;br \/&gt;<br \/>\n  \/\/\u30d5\u30a9\u30fc\u30e0\u306e\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u66f4\u65b0&lt;br \/&gt;<br \/>\n  const hundle = (e)=&gt;{&lt;br \/&gt;<br \/>\n    const {name,value} = e.target&lt;br \/&gt;<br \/>\n    setItem({&#8230;d_item,[name]:value})&lt;br \/&gt;<br \/>\n  }&lt;br \/&gt;<br \/>\n  \/\/\u66f4\u65b0\u30dc\u30bf\u30f3\u62bc\u4e0b\u30a4\u30d9\u30f3\u30c8&lt;br \/&gt;<br \/>\n  const onSubmit = ()=&gt;{&lt;br \/&gt;<br \/>\n    const data = {&lt;br \/&gt;<br \/>\n      title:d_item.title,&lt;br \/&gt;<br \/>\n      description:d_item.description,&lt;br \/&gt;<br \/>\n      str_status:d_item.str_status,&lt;br \/&gt;<br \/>\n    }&lt;br \/&gt;<br \/>\n    context.updTodo(params_id,data)&lt;br \/&gt;<br \/>\n    navigate(&#8216;\/&#8217;) \/\/\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306b\u9077\u79fb&lt;br \/&gt;<br \/>\n  }&lt;br \/&gt;<br \/>\n\treturn (&lt;br \/&gt;<br \/>\n    &lt;&gt;&lt;\/p&gt;<br \/>\n&lt;h2&gt;TODO\u3092\u7de8\u96c6\u3059\u308b&lt;\/h2&gt;<br \/>\n&lt;p&gt;      {&lt;br \/&gt;<br \/>\n        (params_id !== d_item.id)?&lt;\/p&gt;<br \/>\n&lt;div&gt;ID:{params.id}\u306eTODO\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f{d_item.id}&lt;\/div&gt;<br \/>\n&lt;p&gt;        :&lt;br \/&gt;<br \/>\n          &lt;&gt;&lt;\/p&gt;<br \/>\n&lt;div&gt;<br \/>\n            &lt;label&gt;\u30bf\u30a4\u30c8\u30eb&lt;\/label&gt;&lt;br \/&gt;<br \/>\n            &lt;input type=&#8221;text&#8221; id=&#8221;title&#8221; name=&#8221;title&#8221; value={d_item.title} onChange={hundle}\/&gt;<br \/>\n          &lt;\/div&gt;<br \/>\n&lt;div&gt;<br \/>\n            &lt;label&gt;\u8aac\u660e&lt;\/label&gt;&lt;br \/&gt;<br \/>\n            &lt;textarea id=&#8221;description&#8221; name=&#8221;description&#8221; value={d_item.description} onChange={hundle}\/&gt;<br \/>\n          &lt;\/div&gt;<br \/>\n&lt;div&gt;<br \/>\n          &lt;label&gt;\u30b9\u30c6\u30fc\u30bf\u30b9&lt;\/label&gt;&lt;br \/&gt;<br \/>\n            &lt;select id=&#8221;status&#8221; name=&#8221;str_status&#8221; onChange={hundle}&gt;&lt;option value=&#8221;waiting&#8221;&gt;waiting&lt;\/option&gt;&lt;option value=&#8221;working&#8221;&gt;working&lt;\/option&gt;&lt;option value=&#8221;completed&#8221;&gt;completed&lt;\/option&gt;&lt;option value=&#8221;pending&#8221;&gt;pending&lt;\/option&gt;&lt;\/select&gt;<br \/>\n          &lt;\/div&gt;<br \/>\n&lt;p&gt;          &lt;\/&gt;&lt;br \/&gt;<br \/>\n      }&lt;br \/&gt;<br \/>\n      &lt;button onClick={()=&gt;onSubmit()}&gt;\u66f4\u65b0\u3059\u308b&lt;\/button&gt;&lt;br \/&gt;<br \/>\n    &lt;\/&gt;&lt;br \/&gt;<br \/>\n\t)&lt;br \/&gt;<br \/>\n}&lt;\/p&gt;<br \/>\n&lt;p&gt;export default EditTodo&lt;\/p&gt;<br \/>\n&lt;p&gt;\u5404\u7a2e\u5236\u5fa1&lt;br \/&gt;<br \/>\nuseReducer\u30d5\u30c3\u30af\u306b\u3088\u3063\u3066\u5236\u5fa1\u3055\u308c\u305f\u5404\u7a2e\u30e1\u30bd\u30c3\u30c9\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u305f\u3060\u3001\u6ce8\u610f\u70b9\u3068\u3057\u3066React\u3067\u524a\u9664\u5236\u5fa1\u3059\u308b\u5834\u5408\u3001splice\u30e1\u30bd\u30c3\u30c9\u304c\u3046\u307e\u304f\u6a5f\u80fd\u3057\u306a\u3044\uff08\u5024\u306e\u518d\u4ee3\u5165\u3084\u767b\u9332\u3084\u4fee\u6b63\u306e\u3088\u3046\u306b\u753b\u9762\u306e\u9077\u79fb\u304c\u884c\u308f\u308c\u306a\u3044\u306e\u3067\u3001\u5909\u66f4\u3092\u691c\u77e5\u3057\u306a\u3044\u305d\u3046\u3067\u3059\uff09\u306e\u3067\u3001filter\u3092\u4f7f\u3044\u307e\u3059\u3002&lt;br \/&gt;<br \/>\n\u203b\u5b89\u6613\u306buseNavigate\u3092\u4f7f\u7528\u3057\u3088\u3046\u3068\u3057\u3066\u3082\u30d5\u30c3\u30af\u4e0a\u3067\u306f\u4f7f\u7528\u3067\u304d\u307e\u305b\u3093\u3068\u30a8\u30e9\u30fc\u304c\u51fa\u307e\u3059\u3002&lt;\/p&gt;<br \/>\n&lt;p&gt;Reducers.js&lt;br \/&gt;<br \/>\nconst addTodo = (state,data)=&gt;{&lt;br \/&gt;<br \/>\n  state.push(data.dif)&lt;br \/&gt;<br \/>\n  return state&lt;br \/&gt;<br \/>\n}&lt;br \/&gt;<br \/>\n\/\/\u30c7\u30fc\u30bf\u66f4\u65b0&lt;br \/&gt;<br \/>\nconst updTodo = (state,data)=&gt;{&lt;br \/&gt;<br \/>\n  const idx = state.findIndex((item)=&gt;item.id === data.id)&lt;br \/&gt;<br \/>\n  state[idx] = {&#8230;state[idx],&#8230;data.dif}&lt;br \/&gt;<br \/>\n  return state&lt;br \/&gt;<br \/>\n}&lt;br \/&gt;<br \/>\n\/\/\u30c7\u30fc\u30bf\u524a\u9664&lt;br \/&gt;<br \/>\nconst delTodo = (state,data)=&gt;{&lt;br \/&gt;<br \/>\n  const rest = state.filter((item)=&gt;item.id !== data.id)&lt;br \/&gt;<br \/>\n  return rest&lt;br \/&gt;<br \/>\n}&lt;\/p&gt;<br \/>\n&lt;p&gt;export const todoReducer =(state,action):Todo[]=&gt;{&lt;br \/&gt;<br \/>\n  switch(action.type){&lt;br \/&gt;<br \/>\n    case &#8220;ADD_TODO&#8221;: return addTodo(state,action.data)&lt;br \/&gt;<br \/>\n    case &#8220;UPD_TODO&#8221;: return updTodo(state,action.data)&lt;br \/&gt;<br \/>\n    case &#8220;DEL_TODO&#8221;: return delTodo(state,action.data)&lt;br \/&gt;<br \/>\n    default: return action.data&lt;br \/&gt;<br \/>\n  }&lt;br \/&gt;<br \/>\n}&lt;\/p&gt;<br \/>\n&lt;p&gt;export default todoReducer;&lt;\/p&gt;<br \/>\n&lt;p&gt;\u578b\u5b9a\u7fa9\u306b\u3064\u3044\u3066&lt;br \/&gt;<br \/>\n\u578b\u5b9a\u7fa9\u306e\u30d5\u30a1\u30a4\u30eb\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002\u5272\u3068\u67d4\u8edf\u306b\u4efb\u610f\u306e\u578b\u3092\u4f5c\u6210\u3067\u304d\u308b\u306e\u3067\u3001\u5b9a\u7fa9\u6700\u9069\u306a\u578b\u3092\u4f5c\u308a\u3001any\u3067\u4ee3\u7528\u3057\u3066\u3044\u308b\u90e8\u5206\u3092\u88dc\u5b8c\u3057\u3066\u3044\u304f\u3068\u3044\u3044\u3068\u601d\u3044\u307e\u3059\u3002&lt;\/p&gt;<br \/>\n&lt;p&gt;todotype.ts&lt;br \/&gt;<br \/>\n\/\/\u30d9\u30fc\u30b9\u3068\u306a\u308b\u578b\uff08|\u3067or\u6761\u4ef6\u3092\u4f5c\u6210\u3067\u304d\u308b\uff09&lt;br \/&gt;<br \/>\nexport type Status = &#8216;waiting&#8217;|&#8217;working&#8217;|&#8217;completed&#8217;|&#8217;pending'&lt;\/p&gt;<br \/>\n&lt;p&gt;export type Data = {&lt;br \/&gt;<br \/>\n  id: number,&lt;br \/&gt;<br \/>\n  title: string,&lt;br \/&gt;<br \/>\n  description: string,&lt;br \/&gt;<br \/>\n  str_status: Status, \/\/\u4e0a\u3067\u5b9a\u7fa9\u3057\u305f\u4efb\u610f\u306e\u30d1\u30e9\u30e1\u30fc\u30bf&lt;br \/&gt;<br \/>\n}&lt;\/p&gt;<br \/>\n&lt;p&gt;\/\/\u30a2\u30ec\u30f3\u30b8\u3055\u308c\u305f\u578b&lt;br \/&gt;<br \/>\n\/\/\u4efb\u610f\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304b\u3089\u72ec\u81ea\u306e\u578b\u5b9a\u7fa9\u3092\u4f5c\u6210\u3057\u305f\u3044\u5834\u5408\uff08\u3053\u3053\u3067\u306fData\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u3046\u3061\u3001title\u3001description\u3001sutatus\u306e3\u3064\u306e\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u7528\u3044\u305fParams\u578b\u3092\u4f5c\u6210\u3057\u3066\u3044\u308b\uff09&lt;br \/&gt;<br \/>\nexport type Params = Pick&lt;Data,&#8217;title&#8217;|&#8217;description&#8217;|&#8217;status&#8217;&gt;&lt;\/p&gt;<br \/>\n&lt;p&gt;\/\/\u57fa\u672c\u306e\u578b\u5b9a\u7fa9\u3092\u7d44\u307f\u5408\u308f\u305b\u305f\u3044\u5834\u5408\uff08Todos\u306fData\u578b\u306e\u96c6\u5408\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3042\u308b\u3068\u5b9a\u7fa9\uff09&lt;br \/&gt;<br \/>\nexport interface Todos{&lt;br \/&gt;<br \/>\n  todos: Data[]&lt;br \/&gt;<br \/>\n}&lt;\/p&gt;<br \/>\n&lt;p&gt;\/\/\u30e1\u30bd\u30c3\u30c9\u3082\u3053\u306e\u3088\u3046\u306b\u5b9a\u7fa9\u3067\u304d\u308b\uff08useContext\u3067\u53d7\u3051\u6e21\u3059\u306b\u306f\u5fc5\u9808\uff09&lt;br \/&gt;<br \/>\nexport type Reducer = {&lt;br \/&gt;<br \/>\n  addTodo: (dif:Data)=&gt; void,&lt;br \/&gt;<br \/>\n  updTodo: (id:number,dif:Data)=&gt; void,&lt;br \/&gt;<br \/>\n  delTodo: (id:number)=&gt;void,&lt;br \/&gt;<br \/>\n  todos: Data&lt;br \/&gt;<br \/>\n}&lt;\/p&gt;<br \/>\n&lt;p&gt;\u6f14\u7fd2\uff19\uff1aNext.js\u3000\u203b\u66f8\u304d\u304b\u3051&lt;br \/&gt;<br \/>\nReact\u4e00\u822c\u666e\u53ca\u306e\u80cc\u666f\u306b\u306fNext.js\u306e\u5b58\u5728\u304c\u5927\u304d\u3044\u3067\u3059\u304c\u3001Next.js\u306f\u3042\u308b\u7a0b\u5ea6React\u3092\u30de\u30b9\u30bf\u30fc\u3057\u3066\u304b\u3089\u306e\u65b9\u304c\u3044\u3044\u3067\u3059\u3002\u307e\u305f\u3001Next.js\u3082\u30d0\u30fc\u30b8\u30e7\u30f3\u306b\u3088\u3063\u3066\u8272\u3005\u3068\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3001\u30d5\u30a1\u30a4\u30eb\u69cb\u6210\u304c\u7570\u306a\u308b\u306e\u3067\u6ce8\u610f\u304c\u5fc5\u8981\u3067\u3059\u3002&lt;br \/&gt;<br \/>\n\u4ee5\u4e0b\u66f8\u304d\u304b\u3051<br \/>\n&lt;\/div&gt;<br \/>\n<\/textarea><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u8fd9\u4e2a\u662f\u5c06\u524d\u4e00\u7bc7\u6587\u7ae0\u7684\u7eed\u4f5c\u6309\u7167\u5404\u81ea\u7684\u6846\u67b6\u8fdb\u884c\u5206\u7c7b\uff0c\u4ee5\u4fbf\u66f4\u5bb9\u6613\u5730\u8ffd\u8e2a\u65f6\u4ee3\u6f6e\u6d41\u7684\u53d8\u5316\u3002 jQuery\u611b\u597d\u5bb6\u306e\u305f\u3081\u306eV [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38165","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>\u5728\u4f7f\u7528JS\u6846\u67b6React\u8fdb\u884c\u6570\u636e\u5904\u7406\u548c\u6c47\u603b\u7684\u7248\u672c - 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\/\u5728\u4f7f\u7528js\u6846\u67b6react\u8fdb\u884c\u6570\u636e\u5904\u7406\u548c\u6c47\u603b\u7684\u7248\u672c\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5728\u4f7f\u7528JS\u6846\u67b6React\u8fdb\u884c\u6570\u636e\u5904\u7406\u548c\u6c47\u603b\u7684\u7248\u672c\" \/>\n<meta property=\"og:description\" content=\"\u8fd9\u4e2a\u662f\u5c06\u524d\u4e00\u7bc7\u6587\u7ae0\u7684\u7eed\u4f5c\u6309\u7167\u5404\u81ea\u7684\u6846\u67b6\u8fdb\u884c\u5206\u7c7b\uff0c\u4ee5\u4fbf\u66f4\u5bb9\u6613\u5730\u8ffd\u8e2a\u65f6\u4ee3\u6f6e\u6d41\u7684\u53d8\u5316\u3002 jQuery\u611b\u597d\u5bb6\u306e\u305f\u3081\u306eV [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5728\u4f7f\u7528js\u6846\u67b6react\u8fdb\u884c\u6570\u636e\u5904\u7406\u548c\u6c47\u603b\u7684\u7248\u672c\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-17T21:45:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-28T17:47:32+00:00\" \/>\n<meta name=\"author\" content=\"\u79d1, \u9896\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u79d1, \u9896\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/\",\"name\":\"\u5728\u4f7f\u7528JS\u6846\u67b6React\u8fdb\u884c\u6570\u636e\u5904\u7406\u548c\u6c47\u603b\u7684\u7248\u672c - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-07-17T21:45:16+00:00\",\"dateModified\":\"2024-04-28T17:47:32+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5728\u4f7f\u7528JS\u6846\u67b6React\u8fdb\u884c\u6570\u636e\u5904\u7406\u548c\u6c47\u603b\u7684\u7248\u672c\"}]},{\"@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\/8ca01ba7f7362ad4edb7da206a12f29e\",\"name\":\"\u79d1, \u9896\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g\",\"caption\":\"\u79d1, \u9896\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keying\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u5728\u4f7f\u7528JS\u6846\u67b6React\u8fdb\u884c\u6570\u636e\u5904\u7406\u548c\u6c47\u603b\u7684\u7248\u672c - 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\/\u5728\u4f7f\u7528js\u6846\u67b6react\u8fdb\u884c\u6570\u636e\u5904\u7406\u548c\u6c47\u603b\u7684\u7248\u672c\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u5728\u4f7f\u7528JS\u6846\u67b6React\u8fdb\u884c\u6570\u636e\u5904\u7406\u548c\u6c47\u603b\u7684\u7248\u672c","og_description":"\u8fd9\u4e2a\u662f\u5c06\u524d\u4e00\u7bc7\u6587\u7ae0\u7684\u7eed\u4f5c\u6309\u7167\u5404\u81ea\u7684\u6846\u67b6\u8fdb\u884c\u5206\u7c7b\uff0c\u4ee5\u4fbf\u66f4\u5bb9\u6613\u5730\u8ffd\u8e2a\u65f6\u4ee3\u6f6e\u6d41\u7684\u53d8\u5316\u3002 jQuery\u611b\u597d\u5bb6\u306e\u305f\u3081\u306eV [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u5728\u4f7f\u7528js\u6846\u67b6react\u8fdb\u884c\u6570\u636e\u5904\u7406\u548c\u6c47\u603b\u7684\u7248\u672c\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-07-17T21:45:16+00:00","article_modified_time":"2024-04-28T17:47:32+00:00","author":"\u79d1, \u9896","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u79d1, \u9896","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"24 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/","name":"\u5728\u4f7f\u7528JS\u6846\u67b6React\u8fdb\u884c\u6570\u636e\u5904\u7406\u548c\u6c47\u603b\u7684\u7248\u672c - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-07-17T21:45:16+00:00","dateModified":"2024-04-28T17:47:32+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/8ca01ba7f7362ad4edb7da206a12f29e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u5728\u4f7f\u7528JS\u6846\u67b6React\u8fdb\u884c\u6570\u636e\u5904\u7406\u548c\u6c47\u603b\u7684\u7248\u672c"}]},{"@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\/8ca01ba7f7362ad4edb7da206a12f29e","name":"\u79d1, \u9896","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8a6fb3cc7ba2f69d2189ba532aec4633ea7ed75ac0af162ec367cb3abc0fb2af?s=96&d=mm&r=g","caption":"\u79d1, \u9896"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keying\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8%e4%bd%bf%e7%94%a8js%e6%a1%86%e6%9e%b6react%e8%bf%9b%e8%a1%8c%e6%95%b0%e6%8d%ae%e5%a4%84%e7%90%86%e5%92%8c%e6%b1%87%e6%80%bb%e7%9a%84%e7%89%88%e6%9c%ac%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38165","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\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38165"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38165\/revisions"}],"predecessor-version":[{"id":72755,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38165\/revisions\/72755"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}