{"id":1582,"date":"2021-08-06T17:05:12","date_gmt":"2021-08-06T08:05:12","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=1582"},"modified":"2022-11-27T04:10:25","modified_gmt":"2022-11-26T19:10:25","slug":"reactprops","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=1582","title":{"rendered":"React(props)"},"content":{"rendered":"\n

\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5c5e\u6027\u3092\u307e\u3068\u3081\u3066\u4fdd\u7ba1\u3059\u308b\u305f\u3081\u306e\u3082\u306e\u3067\u3001\u5024\u306f\u53d6\u308a\u51fa\u305b\u308b\u304c\u5909\u66f4\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n\n\n\n

\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u5024\u3092\u6e21\u3057\u305f\u3044\u3068\u304d\u306bprops\u3092\u4f7f\u3046\u3053\u3068\u3067\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002
App.js(\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8)\u304b\u3089\u5f15\u6570\u3092\u6e21\u3057\u3066Basic1.js(\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8)\u3067\u5f15\u6570\u306bprops\u3092\u8a18\u8ff0\u3057\u3001\u30ab\u30fc\u30ea\u30fc\u30d6\u30e9\u30b1\u30c3\u30c8\u3067{props.\u5c5e\u6027}\u8868\u793a\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n

props\u306f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3002\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u5c5e\u6027\u60c5\u5831\u3092\u307e\u3068\u3081\u305f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u304a\u308a\u3001\u3053\u306eprops\u304b\u3089\u5fc5\u8981\u306a\u5024\u3092\u53d6\u308a\u51fa\u3057\u3066\u5229\u7528\u3059\u308b\u3053\u3068\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u5024\u3092\u53d7\u3051\u53d6\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n\n\n\n

\n
\n

\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h2>\n<\/div>\n\n\n\n
\n

\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h2>\n\n\n\n
const Basic1 = (props) => {\n    return (\n        <div>\n            <h1>Hello{props.name}<\/h1>\n        <\/div>\n    )\n}<\/code><\/pre><\/div>\n<\/div>\n<\/div>\n\n\n\n
<\/code><\/pre><\/div>\n\n\n\n
this.props<\/h2>\n\n\n\n
this.props.content\u306f\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u81ea\u8eab\u306eprops\u30d7\u30ed\u30d1\u30c6\u30a3\u5185\u306b\u3042\u308bcontent\u3068\u3044\u3046\u5024\u3092\u306f\u3081\u8fbc\u3080\u3082\u306e
{}\u3067\u56f2\u308f\u308c\u305f\u90e8\u5206\u306fJavaScript\u306e\u5024\u3092\u6307\u5b9a
JSX\u3067\u306f\u30bf\u30b0\u306e\u4e2d\u306bJavaScript\u306e\u5909\u6570\u3084\u30d7\u30ed\u30d1\u30c6\u30a3\u3068\u3044\u3063\u305f\u5024\u3092\u76f4\u63a5\u66f8\u304d\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u308b<\/p>\n\n\n\n
content\u3068\u3044\u3046\u5c5e\u6027\u3068\u3057\u3066\u7528\u610f\u3057\u3066\u3042\u308b\u5024\u304c\u305d\u306e\u307e\u307e\u8868\u793a\u3055\u308c\u3066\u3044\u308b<\/p>\n\n\n\n
render:function(){\n  return(\n  <p>{this.props.content}<\/p>\n  );\n}\n});\n\nReactDOM.render(\n  <MyComponent content="\u305d\u308c\u304ccontent\u306e\u5024\u3067\u3059"\/>\n  document.getElementById('msg')\n);<\/code><\/pre><\/div>\n\n\n\n
<\/h3>\n\n\n\n
{{}}\u3068\u3044\u3046\u8a18\u8ff0\u306f{}\u3068\u3044\u3046JavaScript\u306e\u5024\u304c\u5909\u6570\u306a\u3069\u3092\u8a18\u8ff0\u3059\u308b\u30d6\u30ec\u30fc\u30b9\u8a18\u53f7\u306e\u4e2d\u306b{color: , background: }\u3068\u3044\u3046\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u30ea\u30c6\u30e9\u30eb\u304c\u66f8\u304b\u308c\u3066\u3044\u308b<\/p>\n\n\n\n
<\/i><\/div>
\n
\u30ea\u30c6\u30e9\u30eb\u3068\u306f\u30d7\u30ed\u30b0\u30e9\u30e0\u4e0a\u3067\u6570\u5024\u3084\u6587\u5b57\u5217\u306a\u3069\u306e\u30c7\u30fc\u30bf\u578b\u306e\u5024\u3092\u76f4\u63a5\u8a18\u8ff0\u3067\u304d\u308b\u3088\u3046\u306b\u69cb\u6587\u3068\u3057\u3066\u5b9a\u7fa9\u3057\u305f\u3082\u306e<\/p>\n<\/div><\/div>\n\n\n\n
render:function(){\n  return(\n  <p style={{color:this.props.styleColor,background:this.props.styleBg,padding:this.props.stylePd}}>{this.props.content}<\/p>\n\nReactDOM.render(\n  <MyComponent styleColor="white" styleBg="red" stylePd="10px" content="\u3053\u308c\u304c\u30b3\u30f3\u30c6\u30f3\u30c4\u3067\u3059"\/>\n);<\/code><\/pre><\/div>\n\n\n\n