呼び出す側
<コンポーネント名 props名="値"/>の要領で書く
|
1 |
<span class="p"><</span><span class="nt">td</span><span class="p">><</span><span class="nc">GetPod</span> <span class="na">name</span><span class="p">=</span><span class="s">"vamdemic111aaa-app"</span><span class="p">/></</span><span class="nt">td</span><span class="p">></span> |
呼び出される側
- propsに入る
this.props.nameで使うことができる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<span class="kd">class</span> <span class="nx">GetPod</span> <span class="kd">extends</span> <span class="nx">Component</span> <span class="p">{</span> <span class="kd">constructor</span><span class="p">(</span><span class="nx">props</span><span class="p">)</span> <span class="p">{</span> <span class="k">super</span><span class="p">(</span><span class="nx">props</span><span class="p">);</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span> <span class="na">podstatus</span><span class="p">:</span> <span class="dl">''</span> <span class="p">}</span> <span class="p">}</span> <span class="c1">// renderの前に実行される</span> <span class="nx">componentWillMount</span><span class="p">()</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">json</span> <span class="o">=</span> <span class="p">{</span><span class="dl">"</span><span class="s2">Name</span><span class="dl">"</span><span class="p">:</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">};</span> <span class="kd">const</span> <span class="nx">convert_json</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">json</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">obj</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">convert_json</span><span class="p">);</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">name</span><span class="p">)</span> <span class="kd">const</span> <span class="nx">request</span> <span class="o">=</span> <span class="nx">axios</span><span class="p">.</span><span class="nx">create</span><span class="p">({</span> <span class="na">baseURL</span><span class="p">:</span> <span class="dl">"</span><span class="s2">http://127.0.0.1:1323</span><span class="dl">"</span><span class="p">,</span> <span class="na">headers</span><span class="p">:</span> <span class="p">{</span> <span class="dl">'</span><span class="s1">Content-Type</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">application/json</span><span class="dl">'</span><span class="p">,</span> <span class="p">},</span> <span class="na">responseType</span><span class="p">:</span> <span class="dl">'</span><span class="s1">json</span><span class="dl">'</span><span class="p">,</span> <span class="na">method</span><span class="p">:</span> <span class="dl">"</span><span class="s2">GET</span><span class="dl">"</span> <span class="p">})</span> <span class="nx">request</span><span class="p">.</span><span class="kd">get</span><span class="p">(</span><span class="dl">"</span><span class="s2">/getpodstatus</span><span class="dl">"</span><span class="p">,</span> <span class="nx">obj</span><span class="p">)</span> <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">request</span> <span class="o">=></span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">setState</span><span class="p">({</span> <span class="c1">// podstatus: request.data.items[0].status.phase</span> <span class="na">podstatus</span><span class="p">:</span> <span class="nx">request</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">items</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">status</span><span class="p">.</span><span class="nx">phase</span> <span class="p">})</span> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">podstatus</span><span class="p">)</span> <span class="p">})</span> <span class="p">}</span> <span class="c1">// コンポーネントが呼ばれたらstateを返すようにする</span> <span class="nx">render</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="p"><</span><span class="nt">p</span><span class="p">></span><span class="si">{</span><span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">podstatus</span><span class="si">}</span><span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p">;</span> <span class="p">}</span> <span class="p">}</span> |