Closed7

forwardRefって何なんだっけ?

結論

  • refはそもそも下記のような動きをする
    • DOMならdomエレメント
    • それ以外ならクラスインスタンス
    • インスタンスを持たないものにrefしてもコケるだけ
  • なのでFunctional Componentにはrefをそのまま渡せない
  • forwardRefによりスキップして下位コンポーネントに渡せるようになる
    • これは単なる便利関数ではなく、Reactの内部で特殊に処理されている
  • forwardRefを使いたくなければ_refみたいに名前よけする

↓最終的にこういう理解をした

そもそもとして自前したコンポーネントに対してrefを渡すとその時点で怒られる

const ref = useRef()
<SomeComponent ref={ref} /> // refが取れないエラーが発生

なので慣例的に別な名前をつけてrefを渡したりすることがあった

const SomeComponent = ({ _ref }) => {
  return <div id="non-forarded" ref={_ref}>non-forwarded</div>
}

const ref = useRef()
<SomeComponent _ref={ref} /> // これならOK

で、これをショートハンド化(?)するのがforwardRef

const Forwarded = forwardRef<HTMLDivElement>((props, ref) => {
  return <div id="forarded" ref={ref}>forwarded</div>
})

const ref = useRef()
<SomeComponent ref={ref} /> // OK

なんでカスタムコンポーネントにref出来ないんだっけ?

HTML 要素に対して ref 属性が使用されている場合、React.createRef() を使ってコンストラクタ内で作成された ref は、その current プロパティとして根底にある DOM 要素を受け取ります

ref 属性がカスタムクラスコンポーネントで使用されるとき、ref オブジェクトはコンポーネントのマウントされたインスタンスを current として受け取ります

関数コンポーネント (function components) には ref 属性を使用してはいけません。なぜなら、関数コンポーネントはインスタンスを持たないからです

そうだった。インスタンスを取るのだからFCは取れないんだった。

Class CompoenntにRefつけると何起きるんだっけ?

class NonForwardedClass extends React.Component {
  render() {
   // ↓このthis.props.refは取れない
    return <div id="non-forarded-class" ref={this.props.ref}>non-forwarded-class</div>
  }
}

<NonForwardedClass ref={ref3} />
// ↑このref3は {current: NonForwardedClass}  が取れる

ソースをまさぐる

ということで思ったより特殊なことされてるっぽい

このスクラップは2021/05/13にクローズされました
ログインするとコメントできます