{"id":1528,"date":"2015-02-24T07:19:24","date_gmt":"2015-02-23T23:19:24","guid":{"rendered":"http:\/\/blog.turn.tw\/?p=1528"},"modified":"2015-02-24T08:37:23","modified_gmt":"2015-02-24T00:37:23","slug":"%e6%8f%90%e9%ab%98react-component%e9%87%8d%e7%94%a8%e6%80%a7%ef%bc%9acomposition","status":"publish","type":"post","link":"https:\/\/blog.turn.tw\/?p=1528","title":{"rendered":"\u63d0\u9ad8React component\u91cd\u7528\u6027\uff1aComposition"},"content":{"rendered":"<p>\u9019\u9663\u5b50\u5bebReact\u7684components\uff0c\u5e38\u5e38\u5f88\u5feb\u5c31\u5b8c\u6210\u4e86\u671f\u5f85\u7684\u6548\u679c\u3002<br \/>\n\u4f46\u662f\u7e3d\u89ba\u5f97\u6c92\u6709\u91cd\u7528\u6027\u3001\u7121\u6cd5\u5f9eapplication\u7368\u7acb\u51fa\u4f86\u3002<\/p>\n<p>\u6211\u60f3\u5c07\u5143\u4ef6\u4e2d\u53ef\u91cd\u7528\u7684\u90e8\u4efd\u7368\u7acb\u51fa\u4f86\uff0c\u6210\u70ba\u57fa\u672c\u5143\u4ef6\uff0c\u63a5\u8457\u91dd\u5c0dapplication\u53e6\u5beb\u5143\u4ef6\u53bb\u64f4\u5145\u9019\u4e9b\u57fa\u672c\u5143\u4ef6\u3002<br \/>\n\u6709\u8fa6\u6cd5\u8b93\u4e00\u500bcomponent\u53bb\u7e7c\u627f\u53e6\u4e00\u500bcomponent\u55ce\uff1f\u4f3c\u4e4e\u4e0d\u884c\u3002<\/p>\n<p>\u6211\u9996\u5148\u5728\u958b\u767c<a href=\"http:\/\/howtomakeaturn.github.io\/react-lightbox\/index.html\">React-Lightbox<\/a>\u6642\u9047\u5230\u4e86\u4e0a\u8ff0\u554f\u984c\u3002<\/p>\n<p>\u6211\u60f3\u88fd\u4f5c\u4e00\u500bLightbox\u6548\u679c\u7684plugin\uff0c\u63d0\u4f9bLightbox\u3001LightboxTrigger\u3001LightboxModal\u4e09\u500bcomponent\uff0c\u8b93developer\u81ea\u8a02\u89f8\u767cLightbox\u7684\u6309\u9215\u3001Lightbox\u6846\u6846\u5167\u7684\u5167\u5bb9\u3002<\/p>\n<p>\u7528\u6cd5\u985e\u4f3c\u9019\u6a23\uff1a<\/p>\n<pre>\r\n        React.renderComponent(\r\n            <Lightbox>\r\n                <LightboxTrigger>\r\n                    <ToggleButton \/>\r\n                <\/LightboxTrigger>\r\n                <LightboxModal>\r\n                    <MyPanel \/>\r\n                <\/LightboxModal>\r\n            <\/Lightbox>,                \r\n            document.getElementById('react-canvas')\r\n        );\r\n<\/pre>\n<p>\u7bc4\u4f8b\u4e2d\u7684ToggleButton\u8ddfMyPanel\u662f\u7531developer\u81ea\u8a02\u3002<\/p>\n<p>\u8a72\u600e\u9ebc\u9054\u6210\u9019\u500b\u6548\u679c\u5462\uff1f<\/p>\n<p>\u6beb\u7121\u982d\u7dd2\u4e4b\u4e0b\uff0c\u6211\u5beb\u51fa\u50cf\u9019\u6a23\u7684code\uff1a<\/p>\n<pre>\r\n        for (j in this.props){\r\n            if (j !== 'children'){\r\n                this.props.children.props[j] = this.props[j];                \r\n            }\r\n        }\r\n<\/pre>\n<pre>\r\n        for(i in this.props.children){\r\n            this.props.children[i].props.openLightbox = this.openLightbox;\r\n            this.props.children[i].props.closeLightbox = this.closeLightbox;\r\n            this.props.children[i].props.setLightboxState = this.setLightboxState;\r\n            for (j in this.state){\r\n                this.props.children[i].props[j] = this.state[j];                \r\n            }\r\n        }\r\n<\/pre>\n<p>\u7c21\u55ae\u5730\u8aaa\uff0c\u5c31\u662f\u786c\u8457\u982d\u76ae\u50b3\u905e\u67d0\u4e9bprops\u3001\u9054\u5230\u985e\u4f3c\u300c\u7e7c\u627f\u300d\u7684\u300c\u64f4\u5145\u300d\u6548\u679c\u3002<\/p>\n<p>\u773c\u524d\u7684\u554f\u984c\u89e3\u6c7a\u4e86\uff0c\u4f46\u662f<a href=\"https:\/\/github.com\/howtomakeaturn\/React-Lightbox\/issues\/3\" title=\"tomchentw\">tomchentw<\/a>\u6307\u51fa\u9019\u6a23\u5beb\u6cd5\u7684\u554f\u984c\u6240\u5728\uff08\u611f\u8b1d\u6307\u9ede\uff09\uff1a<\/p>\n<p>&#8216;At my first glance it looks pretty magic.&#8217;<\/p>\n<p>\u8a72\u600e\u9ebc\u8fa6\u5462\uff1f<\/p>\n<p>\u6211\u6700\u5f8c\u7d42\u65bc\u5728\u9019\u7bc7SO\u7684\u554f\u7b54\u627e\u5230\u4e86\u4e00\u7dda\u5e0c\u671b\uff1a<\/p>\n<p><a href=\"http:\/\/stackoverflow.com\/questions\/25720595\/extending-react-js-components\" title=\"Extending React.js components\">Extending React.js components<\/a><\/p>\n<p>\u7531component\u53bbwrap\u4f4f\u57fa\u672ccomponent\u4f86\u9054\u5230\u64f4\u5145\u7684\u6548\u679c\uff0c\u7136\u5f8c\u5229\u7528<a href=\"http:\/\/facebook.github.io\/react\/docs\/jsx-spread.html\">JSX Spread Attributes<\/a>\u7684\u5e6b\u52a9\u4f86\u50b3\u905eprops\u3002<\/p>\n<p>\u5229\u7528\u9019\u4e9b\uff0c\u6211\u958b\u767c\u51fa\u4e86\u7b2c\u4e8c\u500bReact\u7684plugin\uff1a<a href=\"http:\/\/howtomakeaturn.github.io\/react-tag-manager\/\">Tag Manager<\/a><\/p>\n<p>\u6240\u8b02\u300c\u4f7f\u7528\u8005\u81ea\u8a02component\u53bb\u64f4\u5145\u57fa\u672ccomponent\u300d\u7684code\uff0c\u5927\u6982\u9577\u9019\u6a23\uff1a<\/p>\n<pre>\r\n\/** @jsx React.DOM *\/\r\n\r\nvar MyCustomTagManager = React.createClass({\r\n\r\n    addTagCallback: function(tagName, setStateCallback){\r\n        alert('Add a tag! Maybe you should send an ajax!');\r\n        setStateCallback({id: 99, name: tagName});\r\n    },\r\n\r\n    removeTagCallback: function(tag){\r\n        alert('Remove a tag! Maybe you should send an ajax!');\r\n    },\r\n\r\n    render: function(){\r\n        return(\r\n            <TagManager {...this.props} addTagCallback={this.addTagCallback} removeTagCallback={this.removeTagCallback} \/>\r\n        )\r\n    }\r\n\r\n});            \r\n<\/pre>\n<h3>\u53cd\u7701<\/h3>\n<p>\u518d\u770b\u4e00\u773c\uff0c\u767c\u73fe\u524d\u9762\u7684\u5beb\u6cd5\u8ddf\u5f8c\u9762\u7684\u5beb\u6cd5\u5176\u5be6\u90fd\u662f\u300c\u7528component\u53bb\u5305\u4f4fcomponent\u300d\uff0c\u610f\u7fa9\u4e0a\u5176\u5be6\u985e\u4f3c\u3002<br \/>\n\uff08\u90fd\u662f\u53ebcomposition\uff1f\u6211\u7406\u8ad6\u6c92\u5b78\u597d\uff0c\u5c0d\u5c08\u6709\u540d\u8a5e\u4e0d\u719f@@&#8221;\uff09<\/p>\n<p>\u5f8c\u9762\u7684\u5beb\u6cd5\u770b\u8d77\u4f86\u66f4explicit\u4e86\uff0cmaintainability\u8ddfreadability\u61c9\u8a72\u4e5f\u66f4\u9ad8\u4e86\u5427\uff1f<br \/>\n\u60a8\u89ba\u5f97\u5462\uff1f<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u9019\u9663\u5b50\u5bebReact\u7684components\uff0c\u5e38\u5e38\u5f88\u5feb\u5c31\u5b8c\u6210\u4e86\u671f\u5f85\u7684\u6548\u679c\u3002 \u4f46\u662f\u7e3d\u89ba\u5f97\u6c92\u6709\u91cd\u7528\u6027\u3001\u7121\u6cd5\u5f9eappli &hellip; <a href=\"https:\/\/blog.turn.tw\/?p=1528\" class=\"more-link\">\u7e7c\u7e8c\u95b1\u8b80 <span class=\"screen-reader-text\">\u63d0\u9ad8React component\u91cd\u7528\u6027\uff1aComposition<\/span> <span class=\"meta-nav\">&rarr;<\/span> <\/a><\/p>\n","protected":false},"author":1,"featured_media":1061,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[2],"tags":[30,21],"_links":{"self":[{"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/posts\/1528"}],"collection":[{"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1528"}],"version-history":[{"count":10,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/posts\/1528\/revisions"}],"predecessor-version":[{"id":1538,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/posts\/1528\/revisions\/1538"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=\/wp\/v2\/media\/1061"}],"wp:attachment":[{"href":"https:\/\/blog.turn.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.turn.tw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}