揮発性コンポーネントにuseRefをつかう

8797 ワード

React hooks hooks テキストリンク

ずっとVueやってたんですが、最近React Hooksの登場でまたReactをかじりだしました。

Vueだと揮発性コンポーネント（ポップアップやスナックバーなどの出ては消えていくもの）をグローバルメソッドとして操るには、下記のスライドのようなことをする必要があります。

Reactだとどうなるのか。useRefを使うといいです。

（っていうかuseRef使い勝手良すぎ…？）

useRefとは

以下のようにして作ったrefContainerのcurrentプロパティには、initialValueで指定した、プレーンオブジェクトが入っていて、そのコンポーネントが存在している限りず～～っと同じ参照を持っていて、currentプロパティの値も変更可能です。

つまり、どこからでも参照可能で変更可能な値を作れます。しかも、変更しても再描画はしません。

const refContainer = useRef(initialValue);

コンポーネント内で好きなcurrentを入れてあげれば、それを通して関数を呼び出したりできちゃうんです。

実装

App.jsは最上層かページコンポーネントかなんかだと思ってください。

useRef(null)としていますが、それをPopupコンポーネントのpopup属性に渡しています。

そうすると、popup.current.open()やpopup.current.close()というようにできていることがわかります。

app.js

  import React, { useRef } from "react"

  import Layout from "../components/layout"
  import Popup from "../components/popup"

  const App = () => {
    const popup = useRef(null)

    return (
      <Layout>
        <button onClick={() => popup.current.open()}>ポップアップを開く</button>
        <button onClick={() => popup.current.close()}>ポップアップを閉じる</button>

        <Popup popup={popup}>
          Hello useRef Popup!!
        </Popup>
      </Layout>
    )
  }

  export default App

Popupコンポーネントを見ていきましょう。

受け取ったpopup属性のcurrentに値を入れてあげます。

下記の２つのメソッドを作ってあげます。それぞれ実行後のCSSクラスが切り替わり、Transitionするようにしました。

open()メソッド ⇒ .popup.popup__visible
close()メソッド ⇒ .popup

popup.js

import React, { useState } from "react"

const Popup = ({ name, popup, children }) => {
  const [visible, setVisible] = useState(false)

  popup.current = {
    open() {
      setVisible(true)
    },
    close() {
      setVisible(false)
    },
  }

  return (
    <div
      className={`popup ${visible ? "popup__visible" : ""}`}
      name={visible ? name : ""}
    >
      {children}
    </div>
  )
}

export default Popup

おまけのCSS

.popup {
  opacity: 0;
  transform: translateY(-300px);
  transition: all 1s ease 0s;
}

.popup__visible {
  opacity: 1;
  transform: translateY(0px);
}

opecity変わるだけなので、ポップアップ感ないですが、まあやりたいことはできたと思います。

このようにuseRefはプレーンオブジェクトを持つコンテナを作ってくれるだけなので、上書きするもよし、どんなオブジェクトだろうがなにを入れようが問題無しです。

なので、メソッド形式でコンポーネント内部の値を書き換えたいという要求も簡単に叶えることができてしまうのでした。

hook便利すぎですね。以上でした～。

Author And Source

この問題について(揮発性コンポーネントにuseRefをつかう), 我々は、より多くの情報をここで見つけました https://qiita.com/oedkty/items/d2e01acf945849c5f9f7

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .

Jenkins2.27実戦配備