Comment accéder aux références d'un composant enfant dans le composant parent ?

Question

Si j'ai quelque chose comme

<Parent>
  <Child1 />
  <Child2 />
  <Child3 />
</Parent>

Et je veux accéder à partir de Child2 où j'ai refs="child2refs" Comment puis-je faire ça ?

Answer 1

Recommandé pour les versions de React antérieures à 16.3

S'il ne peut pas être évité, le modèle suggéré extrait de la Documents sur React serait :

import React, { Component } from 'react';

const Child = ({ setRef }) => <input type="text" ref={setRef} />;

class Parent extends Component {
    constructor(props) {
        super(props);
        this.setRef = this.setRef.bind(this);
    }

    componentDidMount() {
        // Calling a function on the Child DOM element
        this.childRef.focus();
    }

    setRef(input) {
        this.childRef = input;
    }

    render() {
        return <Child setRef={this.setRef} />
    }
}

El Parent transmet une fonction en tant que prop liée à Parent's this . Lorsque React appelle le L'enfant ref accessoire setRef il attribuera le L'enfant ref à la Parent's childRef propriété.

Recommandé pour React >= 16.3

Le transfert de référence est une fonction opt-in qui permet à certains composants de prendre une référence qu'ils reçoivent et de la transmettre à un enfant (en d'autres termes, de la "transférer").

Nous créons Composants qui transmettent leur ref con React.forwardRef . Le retour Composant ref prop doit être du même type que le type de retour de la fonction React.createRef . Chaque fois que React monte le noeud du DOM, la propriété current de la ref créé avec React.createRef pointera vers le nœud DOM sous-jacent.

import React from "react";

const LibraryButton = React.forwardRef((props, ref) => (
  <button ref={ref} {...props}>
    FancyButton
  </button>
));

class AutoFocus extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
    this.onClick = this.onClick.bind(this);
  }

  componentDidMount() {
    this.childRef.current.focus();
  }

  onClick() {
    console.log("fancy!");
  }

  render() {
    return <LibraryButton onClick={this.onClick} ref={this.childRef} />;
  }
}

Exemple de renvoi de réfs HOC

Créé Composants transmettent leurs ref à un nœud enfant.

function logProps(Component) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      const {forwardedRef, ...rest} = this.props;

      // Assign the custom prop "forwardedRef" as a ref
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

  // Note the second param "ref" provided by React.forwardRef.
  // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
  // And it can then be attached to the Component.
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />;
  });
}

Ver Transférer les références dans la documentation de React.

Answer 2

1. Dans le composant enfant, ajoutez une référence au nœud dont vous avez besoin.

2. Dans le composant parent, ajoutez une référence au composant enfant.

   /*

   • Child component */ class Child extends React.Component { render() { return ( <div id="child"> <h1 ref={(node) => { this.heading = node; }}> Child </h1> </div> ); } }

   /*

   • Parent component */ class Parent extends React.Component { componentDidMount() { // Access child component refs via parent component instance like this console.log(this.child.heading.getDOMNode()); }

     render() { return ( <div> <Child ref={(node) => { this.child = node; }} /> </div> ); } }

Démonstration : https://codepen.io/itsfadnis/pen/aLWVVx?editors=0011

Answer 3

Accédez d'abord aux enfants avec : this.props.children chaque enfant aura alors son ref comme une propriété de celui-ci.

Answer 4

Voici un exemple qui se concentrera sur une entrée en utilisant des refs (testé dans React 16.8.6) :

Le composant Enfant :

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return (<input type="text" ref={this.myRef} />);
  }
}

Le composant Parent avec le composant Enfant à l'intérieur :

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }
  componentDidMount() {
    this.childRef.current.myRef.current.focus();
  }
  render() {
    return <Child ref={this.childRef} />;
  }
}

ReactDOM.render(
    <Parent />,
    document.getElementById('container')
);

Le composant Parent avec this.props.children :

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.childRef = React.createRef();
    }
    componentDidMount() {
        this.childRef.current.myRef.current.focus();
    }
    render() {
        const ChildComponentWithRef = React.forwardRef((props, ref) =>
            React.cloneElement(this.props.children, {
                ...props,
                ref
            })
        );
        return <ChildComponentWithRef ref={this.childRef} />
    }
}

ReactDOM.render(
    <Parent>
        <Child />
    </Parent>,
    document.getElementById('container')
);

Answer 5

En utilisant le transfert de référence, vous pouvez transmettre la référence du parent à l'enfant.

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

1. Créez un ref React en appelant React.createRef et affectez-le à une variable ref.
2. Transmettez votre référence à en la spécifiant comme un attribut JSX.
3. React passe le ref à la fonction (props, ref) => ... dans forwardRef comme deuxième argument.
4. Transférer cet argument ref vers le bas en le spécifiant comme un attribut JSX.
5. Lorsque la référence est attachée, ref.current pointera vers le nœud DOM.

Note Le deuxième argument ref n'existe que lorsque vous définissez un composant avec l'appel React.forwardRef. Les composants fonctionnels ou de classe ordinaires ne reçoivent pas l'argument ref, et ref n'est pas non plus disponible dans les props.

La redirection des références n'est pas limitée aux composants DOM. Vous pouvez également transférer des références à des instances de composants de classe.

Référence : Documentation React.