親から子コンポーネントのstateにcreateRefを使ってアクセスする
<p>表題の通りだけど、個人的におすすめしない。</p>
<p>refでDOM要素にも<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>にも自由にアクセスできるようにはなるが、せっかくpropsで<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>間のやり取りができるようになっているので、あまりそれを崩したくない。
ちなみに、reactのリファレンスにはrefを使うのに適したケースとして以下が挙げられている。</p>
<ul>
<li>フォーカス、テキストの選択およびメディアの再生の管理</li>
<li>アニメーションの発火</li>
<li><a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B5%A1%BC%A5%C9%A5%D1%A1%BC%A5%C6%A5%A3">サードパーティ</a>の DOM ライブラリとの統合</li>
</ul>
<p><a href="https://ja.reactjs.org/docs/refs-and-the-dom.html">Ref と DOM – React</a></p>
<p>が、仕方ない場面はあるのでこういった方法を採用することもある。</p>
<p>下記のようにして、子<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>のstateにアクセスできる。</p>
<pre class="code lang-javascript" data-lang="javascript" data-unlink><span class="synComment">// クラスA内にBという子コンポーネントがあるとする</span>
<span class="synStatement">class</span> A <span class="synStatement">extends</span> React.Component <span class="synIdentifier">{</span>
constructor(props) <span class="synIdentifier">{</span>
<span class="synStatement">super</span>(props);
<span class="synComment">// stateを取得したい子コンポーネントにtestRefを渡すために、ここで作成</span>
<span class="synIdentifier">this</span>.testRef = React.createRef();
<span class="synIdentifier">}</span>
<span class="synComment">// クラスB内に作成したtestRefを渡す</span>
<B
ref=<span class="synIdentifier">{this</span>.testRef<span class="synIdentifier">}</span>
/>
<span class="synComment">// Bコンポーネント内の value というstateにアクセスできる</span>
handleBstate = () => <span class="synIdentifier">{</span>
<span class="synStatement">const</span> test = <span class="synIdentifier">this</span>.testRef.current.state.value
<span class="synIdentifier">}</span>
<span class="synIdentifier">}</span>
</pre>
<p>繰り返すが、あまりおすすめはしない。
瞬間的に子<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%B3%A5%F3%A5%DD%A1%BC%A5%CD%A5%F3%A5%C8">コンポーネント</a>の値を取得したい、関数を利用したいというケースでもなければあまり使わない方が無難だと思う。</p>