🐣

useRefを使って参照先のメソッド呼び出してみた

2020/09/17に公開

React Nativeでパネルを積み重ねたデザインを簡易的に実装するときに、以下のライブラリを使用しました。その時のメモ書きです。
使用したのはこちら→Masonry

そのなかで、ClassComponent内のrefを呼び出して使う箇所があるので、これをuseRefを使って呼び出してみました。

 // Masonryのrefを参照する
  const list = useRef(null);
  // Masonryに初期表示で必要なデータを追加
  useEffect(() => {
	  // Masonry内にあるadditemsメソッドを呼び出す
    list.current.addItems(value);
  }, []);
<Masonry
  ref={list} // useRefで定義したlistを設定
  columns={3} 
  renderItem={(item)=><View>
    <Text>some text</Text>
  </View>}
/>

Discussion