<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 &#x3068; DOM &ndash; 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> &lt;B ref=<span class="synIdentifier">{this</span>.testRef<span class="synIdentifier">}</span> /&gt; <span class="synComment">// Bコンポーネント内の value というstateにアクセスできる</span> handleBstate = () =&gt; <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>