{"id":301,"date":"2021-09-23T19:52:31","date_gmt":"2021-09-23T11:52:31","guid":{"rendered":"http:\/\/gjweb.top\/?p=301"},"modified":"2021-09-25T16:16:08","modified_gmt":"2021-09-25T08:16:08","slug":"props%e6%b7%b1%e5%85%a5","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=301","title":{"rendered":"props\u6df1\u5165"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">props.children\u5c5e\u6027<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>children\u5c5e\u6027\uff1a\u8868\u793a\u7ec4\u4ef6\u6807\u7b7e\u7684\u5b50\u8282\u70b9\u3002\u5f53\u7ec4\u4ef6\u6807\u7b7e\u6709\u5b50\u8282\u70b9\u662f\u65f6\uff0cprops\u5c31\u4f1a\u53c8\u8be5\u5c5e\u6027<\/li><li>chidren\u5c5e\u6027\uff1a\u53ef\u4ee5\u4f20\u9012\u548cprops\u4e00\u6837\u7684\u6570\u636e\u7c7b\u578b\uff0c\uff08\u6587\u5b57\u3001react\u5143\u7d20\u3001\u6807\u7b7e\u3001\u51fd\u6570\u3001\u5176\u4ed6\u6570\u636e\u7c7b\u578b\u7684\u6570\u636e\u7b49\uff09<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \"react\"<br>const Hello = ()=&gt;{<br> &nbsp; &nbsp;return(<br> &nbsp;      &lt;div&gt;<br> &nbsp; &nbsp; &nbsp;      &lt;Child&gt;\u8fd9\u662f\u4e00\u6bb5\u6587\u5b57&lt;\/Child&gt;<br> &nbsp; &nbsp; &nbsp; &nbsp;&lt;\/div&gt;<br> &nbsp;  )<br>}<br>const Child = (props)=&gt;{<br> &nbsp; &nbsp;return(<br> &nbsp;      &lt;div&gt;{props.children}&lt;\/div&gt;<br> &nbsp;  )<br>}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">props \u6821\u9a8c<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>props<\/strong> \u6821\u9a8c\uff1a\u5141\u8bb8\u5728\u521b\u5efa\u7ec4\u4ef6\u7684\u65f6\u5019\uff0c\u5c31\u6307\u5b9aprops\u7684\u7c7b\u578b\u3001\u683c\u5f0f\u7b49<\/li><li>\u4f5c\u7528\uff1a\u6355\u83b7\u4f7f\u7528\u7ec4\u4ef6\u662f\u56e0\u4e3a <strong>props<\/strong> \u5bfc\u81f4\u7684\u9519\u8bef\uff0c\u7ed9\u51fa\u660e\u786e\u7684\u64cd\u4f5c\u63d0\u793a\uff0c\u589e\u52a0\u7ec4\u4ef6\u7684\u5065\u58ee\u6027<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u4f7f\u7528 props \u6821\u9a8c<\/h3>\n\n\n\n<p>\u5b89\u88c5<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install prop-types<\/code><\/pre>\n\n\n\n<p>\u4f7f\u7528<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import PropTypes from \"prop-types\"<br>const App = (props)=&gt;{<br> &nbsp; &nbsp;return (<br> &nbsp;      &lt;h1&gt;{props.colors}&lt;\/h1&gt;<br> &nbsp;  )<br>}<br>App.propTypes = {<br> &nbsp; &nbsp;\/\/ \u786e\u5b9a colors \u5c5e\u6027\u4e3a array \u7c7b\u578b<br> &nbsp; &nbsp;\/\/ \u5982\u679c\u7c7b\u578b\u4e0d\u5f97\uff0c\u5219\u62a5\u51fa\u660e\u786e\u9519\u8bef\uff0c\u4fbf\u4e8e\u5206\u6790\u9519\u8bef\u539f\u56e0<br> &nbsp; &nbsp;colors: PropTypes.array<br>}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u7ea6\u675f\u89c4\u5219<\/h3>\n\n\n\n<ol class=\"wp-block-list\"><li>\u5e38\u89c1\u7c7b\u578b\uff1a<strong>array<\/strong> \u3001<strong>bool<\/strong>\u3001<strong>func<\/strong>\u3001<strong>number<\/strong>\u3001<strong>object<\/strong>\u3001<strong>string<\/strong><\/li><li>React \u5143\u7d20\u7c7b\u578b\uff1a<strong>element<\/strong><\/li><li>\u5fc5\u586b\u9879\uff1a<strong>isRequired<\/strong><\/li><li>\u7279\u5b9a\u7ed3\u6784\u7684\u5bf9\u8c61\uff1a<strong>shape({})<\/strong><\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>key:PropTypes.func<br>key:PropTypes.element<br>key:PropTypes.func.isRequired<br>key:PropTypes.shape({<br> &nbsp; &nbsp;colors:PropTypes.string<br> &nbsp; &nbsp;fintSize:PropTypes.number<br>})<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">props \u9ed8\u8ba4\u503c<\/h2>\n\n\n\n<p>\u7ed9 <strong>props<\/strong> \u8bbe\u7f6e\u9ed8\u8ba4\u503c\uff0c\u5728\u4e3a\u4f20\u5165 <strong>props<\/strong> \u65f6\u751f\u6548<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \"react\"<br>import ReactDOm from \"react-dom\"<br>const APP = (props)=&gt;{<br> &nbsp; &nbsp;return (<br> &nbsp;      &lt;div&gt;<br> &nbsp; &nbsp; &nbsp;      \u6b64\u5904\u5c55\u793a props \u7684\u9ed8\u8ba4\u503c : {props.pageSize}<br> &nbsp; &nbsp; &nbsp; &nbsp;&lt;\/div&gt;<br> &nbsp;  )<br>}<br>\/\/ \u8bbe\u7f6e\u9ed8\u8ba4\u503c<br>APP.defaultProps = {<br> &nbsp; &nbsp;pageSize:10<br>}<br>ReactDOM.render(&lt;APP\/&gt;,document.getElementById('root'))<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>props.children\u5c5e\u6027 children\u5c5e\u6027\uff1a\u8868\u793a\u7ec4\u4ef6\u6807\u7b7e\u7684\u5b50\u8282\u70b9\u3002\u5f53\u7ec4\u4ef6\u6807\u7b7e\u6709\u5b50\u8282\u70b9\u662f\u65f6\uff0cprop [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[],"class_list":["post-301","post","type-post","status-publish","format-standard","hentry","category-react"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=301"}],"version-history":[{"count":0,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/301\/revisions"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}