React forwardRef：refおよびその他の小道具

Question

親コンポーネント：

const Parent = (props) => {
  const ref = useRef();

  return <Child ref={ref} />
}

と子供：

const Child = forwardRef((props, ref) => {
  return <button ref={ref} ...>click</button>
})

Childただより多くの小道具を渡したい場合はどうなりrefますか？

ドキュメントとチュートリアルを検索しましたが、何も見つかりませんでした。そして試行錯誤によって、私はこれがうまくいくと思います：

// in parent
<Child onClick={...} prop1={...} prop2={...} ref={ref} />

その後、でChild、私は（これらの小道具を得ることができonClick、prop1、prop2から）props。

私がする必要があるのはそれだけですか？ref子供に渡す最後の小道具として置くことによって？

Child必要なボタンが複数ある場合はどうなりますrefか？

Answer 1

// in parent
<Child onClick={...} prop1={...} prop2={...} ref={ref} />

順序は関係ありません。forwardRefプロパティからrefpropを抽出し、ラッパーを作成します。

他の小道具はprops（forwardRefコールバック関数の最初の引数）で利用できます

複数の参照を使用する場合は、ここの例を使用できます。

Answer 2

まあ、私はこのアプローチに従っていました、

親コンポーネント

const Parent = (props) => {
  const ref = useRef();

  return <Child _ref={ref} />
}

子コンポーネント

const Child = forwardRef(({ _ref, prop1, prop2, prop3, ...props }) => {
  return <button ref={_ref} ...>click</button>
})

そしてそれはうまくいった