React forwardRef: ref et autres accessoires

Question

Un composant parent:

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

  return <Child ref={ref} />
}

et l'enfant:

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

Et si je veux transmettre plus d'accessoires Childque juste ref?

J'ai recherché des documents et des didacticiels, mais je n'ai rien trouvé; et par essais et erreurs, je suppose que cela fonctionnerait:

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

puis dans Child, je peux obtenir ces accessoires ( onClick, prop1, prop2) à partir props.

Est-ce tout ce que j'ai à faire? En mettant refcomme dernier accessoire passant à l'enfant?

Et si j'ai plus d'un bouton Childqui nécessite un ref?

Answer 1

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

L'ordre n'est pas pertinent. forwardRefextrait le prop ref des propriétés et crée un wrapper.

Les autres accessoires sont disponibles dans props(le premier argument de la forwardReffonction de rappel)

Si vous souhaitez utiliser plusieurs références, vous pouvez utiliser l'exemple ici .

Answer 2

Eh bien, j'avais suivi cette approche,

Composant parent

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

  return <Child _ref={ref} />
}

Composant enfant

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

Et ça a marché