呼ばれる側
- コンポーネントが呼ばれて返す値に
state
をセットすると別コンポーネントから呼び出すことができる
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 |
<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">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">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="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="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> |