React v16.8+ のお話。
hooks を利用して、 Function Component のインスタンスごとに一意な値を割り当てる方法。
<pre class="language-"><code class="language-tsx">import React from 'react'

let counter = 0

const useInstanceId = (): number => {
 const ref = React.useRef&lt;number | null>(null)

 if (ref.current === null) {
 ref.current = counter += 1
 }

 return ref.current
}
</code></pre>
<pre class="language-"><code class="language-tsx">import React from 'react'
import { useInstanceId } from './useInstanceId'

const Example = () => {
 const id = useInstanceId()

 return &lt;span>{id}&lt;/span>
}
</code></pre>
こうすると <code>DemoComponent</code> コンポーネントのインスタンスごとに一意な <code>id</code> が割り振られる。 <code>Ref</code> を用いることで再描画が発生しても <code>id</code> は変わらない。
この方法はインスタンス変数を使う方法として公式ドキュメントに載っていた。
<blockquote>
<a href="https://ja.reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables" rel="noopener noreferrer">インスタンス変数のようなものはありますか？ | フックに関するよくある質問 – React</a>
</blockquote>
<code>React.useRef()</code> で返るオブジェクトは <code>MutableRefObject</code> として定義されており、 <code>current</code> プロパティが読み書き可能になっている。 そこに値をセットして使うというもの。
<code>let counter</code> が気になる気がしないでもないが、まあしゃーなし。
ユースケースとしてはこんな感じ。
<pre class="language-"><code class="language-tsx">import React from 'react'
import { useInstanceId } from './useInstanceId'

const ExamplePanel = (props: { children: React.ReactNode }) => {
 const id = useInstanceId()

 return (
 &lt;>
 &lt;button aria-controls={'demo-pane-' + id}>トグルする&lt;/button>
 &lt;div id={'demo-pane-' + id}>{props.children}&lt;/div>
 &lt;/>
 )
}
</code></pre>
実装はいろいろ省略しているが、 汎用的なコンポーネント内で <code>id</code> 属性を使う場合は値の重複を避けたい。 そんなときに使える。

isoden.dev

最新の投稿