javascript - 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ですか?

score 0 · Accepted Answer

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

親コンポーネント

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

  return <Child _ref={ref} />
}

子コンポーネント

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

そしてそれは働いた

2 に答える 2