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извлекает опору ref из свойств и создает оболочку.

Остальные реквизиты доступны в props(первый аргумент в forwardRefcallback-функции)

Если вы хотите использовать несколько ссылок, вы можете использовать пример здесь .

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>
})

И это сработало