{"id":13021,"date":"2021-01-23T14:28:04","date_gmt":"2021-01-23T05:28:04","guid":{"rendered":"http:\/\/www.code-magagine.com\/?p=13021"},"modified":"2021-01-24T17:07:42","modified_gmt":"2021-01-24T08:07:42","slug":"%e3%80%90react%e3%80%91%e3%80%8cprops%e3%80%8d%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6","status":"publish","type":"post","link":"http:\/\/www.code-magagine.com\/?p=13021","title":{"rendered":"\u3010React\u3011\u300cprops\u300d\u306b\u3064\u3044\u3066"},"content":{"rendered":"

props\u3068\u306f\uff1f<\/h2>\n

\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u6e21\u3057\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u6a5f\u80fd\u306e\u3053\u3068\u3067\u3059\u3002<\/p>\n

\u601d\u60f3<\/h2>\n

props\u306f\u5909\u66f4\u4e0d\u53ef\u80fd\u306a\u30a4\u30df\u30e5\u30fc\u30bf\u30d6\u30eb\u306a\u5024<\/strong><\/span>\u3067\u3059\u3002\u5024\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u306fReact\u306e\u601d\u60f3\u306b\u53cd\u3057\u3066\u4e88\u671f\u305b\u306c\u52d5\u4f5c\u306b\u7e4b\u304c\u308b\u306e\u3067\u907f\u3051\u307e\u3057\u3087\u3046\u3002<\/p>\n

\u5b9f\u88c5<\/h2>\n

\u4e0b\u8a18\u306f\u3069\u3061\u3089\u3082\u30d5\u30a1\u30f3\u30af\u30b7\u30e7\u30ca\u30ebComponent\u3067\u3059\u304cprops\u306b\u3088\u308a\u30c7\u30fc\u30bf\u3092\u9023\u643a\u3055\u305b\u3066\u3044\u307e\u3059\u3002<\/p>\n

const App = () => {\r\n  return (\r\n    <React.Fragment>\r\n      <User name={\"Ichiro\"} \/>\r\n    <\/React.Fragment>\r\n  )\r\n}\r\n\r\nconst User = (props) => {\r\n  return <div>{props.name}<\/div>\r\n}<\/pre>\n
\u4e0a\u8a18\u5185\u5bb9\u306f\u4e0b\u8a18\u306e\u3088\u3046\u306b\u66f8\u304d\u63db\u3048\u3082\u53ef\u80fd\u3067\u3059\u3002<\/p>\n
const App = () => {\r\n  return (\r\n    <React.Fragment>\r\n      <User name={\"Ichiro\"} \/>\r\n    <\/React.Fragment>\r\n  )\r\n}\r\n\r\nconst User = ({name}) => {\r\n  return <div>{name}<\/div>\r\n}<\/pre>\n
\u00a0\u8907\u6570\u9805\u76ee\u3092\u307e\u3068\u3081\u3066\u6e21\u305b\u307e\u3059\u3002<\/h3>\n
\u30b9\u30d7\u30ec\u30c3\u30c8\u6f14\u7b97\u5b50\uff08...\uff09\u3092\u4f7f\u7528\u3059\u308c\u3070\u8907\u6570\u9805\u76ee\u3092\u307e\u3068\u3081\u3066\u6e21\u3059\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n
const App = () => {\r\n  const data = {\r\n     name:\"Ichiro\",\r\n     age: 45\r\n  };\r\n\r\n  return (\r\n    <React.Fragment>\r\n      <User {...data} \/>\r\n    <\/React.Fragment>\r\n  )\r\n}\r\n\r\nconst User = ({name,age}) => {\r\n  return <div>{name} {age}\u6b73<\/div>\r\n}<\/pre>\n
defaultProps<\/h3>\n
defaultProps<\/strong><\/span>\u3092\u4f7f\u7528\u3059\u308b\u3068props\u306e\u521d\u671f\u5024\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002<\/p>\n
const App = () => {\r\n  return (\r\n    <React.Fragment>\r\n      <User name={\"Ichiro\"} \/>\r\n      <User \/>\r\n    <\/React.Fragment>\r\n  )\r\n}\r\n\r\nconst User = (props) => {\r\n  return <div>{props.name}<\/div>\r\n}\r\n\r\nUser.defaultProps = {\r\n  name: \"\u540d\u7121\u3057\"\r\n}<\/pre>\n
propTypes<\/h2>\n
props\u306e\u578b\u30c1\u30a7\u30c3\u30af\u3084\u5fc5\u9808\u30c1\u30a7\u30c3\u30af\u3092\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n
const User = (props) => {\r\n  return <div>{props.name}<\/div>\r\n}\r\n\r\nUser.propTypes = {\r\n  name: PropTypes.string\r\n}<\/pre>\n
\u4e0a\u8a18\u306e\u3088\u3046\u306bPropTypes.string\u3068\u3044\u3046\u578b\u3092\u5b9a\u7fa9\u3057\u305f\u5834\u5408\u306f\u6587\u5b57\u5217\u578b\u3092\u5b9a\u7fa9\u3067\u304d\u307e\u3059\u3002props\u3067\u6587\u5b57\u5217\u4ee5\u5916\u3092\u6e21\u3057\u305f\u5834\u5408\u306f\u30a8\u30e9\u30fc\u306b\u306a\u308a\u307e\u3059\u3002\u306a\u304a\u3001\u5fc5\u9808\u30c1\u30a7\u30c3\u30af\u3082\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n\n\n\n
\u66f8\u304d\u65b9<\/th>\n\u30c1\u30a7\u30c3\u30af\u3067\u5185\u5bb9<\/th>\n<\/tr>\n
PropTypes.string<\/td>\n\u6587\u5b57\u5217<\/td>\n<\/tr>\n
PropTypes.number<\/td>\n\u6570\u5024<\/td>\n<\/tr>\n
\n
\n
name: PropTypes.string.isRequired<\/div>\n<\/div>\n<\/td>\n
\u5fc5\u9808\u304b\u3069\u3046\u304b<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"props\u3068\u306f\uff1f \u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u6e21\u3057\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u6a5f\u80fd\u306e\u3053\u3068\u3067\u3059\u3002 \u601d\u60f3 props\u306f\u5909\u66f4\u4e0d\u53ef\u80fd\u306a\u30a4\u30df\u30e5\u30fc\u30bf\u30d6\u30eb\u306a\u5024\u3067\u3059\u3002\u5024\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u306fReact\u306e\u601d\u60f3\u306b\u53cd\u3057\u3066\u4e88\u671f\u305b\u306c\u52d5\u4f5c\u306b\u7e4b\u304c […]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[116],"tags":[],"_links":{"self":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/13021"}],"collection":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13021"}],"version-history":[{"count":11,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/13021\/revisions"}],"predecessor-version":[{"id":13065,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=\/wp\/v2\/posts\/13021\/revisions\/13065"}],"wp:attachment":[{"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13021"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.code-magagine.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}