Existe-t-il un moyen d'accéder aux accessoires ou aux attributs de données sur l'objet ref d'un composant react. J'ai fouillé dans le composant et je n'ai rien trouvé. Idéalement, je voudrais accéder à l'accessoire valide que je lui ai transmis. Je serais prêt à obtenir les données d'une autre manière, mais idéalement dans l'objet ref si possible.

0
Josh Bowden 21 avril 2020 à 18:01

2 réponses

Meilleure réponse

Les refs React sont un excellent moyen d'obtenir une référence à l'élément DOM rendu par un composant react, vous n'avez donc pas réellement accès au composant via refs, juste le dernier instantané de ce que le composant a imprimé sur le DOM. Consultez la documentation ici. Vous avez cependant accès aux attributs de données DOM. Voici un exemple de comment cela fonctionne. (Remarque: ce n'est pas un bon moyen de faire circuler les données via l'application)

import React from "react";

const CustomDiv = ({ customRef, someProp }) => <div ref={customRef} data-custom-attr={someProp} />;

export default function App() {
    const customRef = React.createRef();

    const clicked = () => {
        console.log(customRef.current);
        console.log(customRef.current.getAttribute("data-custom-attr"));
    };

    return (
        <div className="App">
            <CustomDiv customRef={customRef} someProp={"21"} />
            <button onClick={clicked}>Click Me</button>
        </div>
    );
}

Et le journal de la console après avoir cliqué sur le bouton ressemblera à:

<div data-custom-attr="21"></div>
21 

Vous pouvez consulter l'exemple de travail ici.

J'espère que cela pourra aider.

À votre santé! 🍻

1
Raz Chiriac 21 avril 2020 à 15:41

Si je comprends ce que vous demandez, vous pouvez obtenir un attribut simplement en le retirant du ref. Prenons l'exemple ci-dessous.

const {useRef, useEffect} = React;

const Foo = () => {
    const ref = useRef(null);

    useEffect(() => {
        if (!ref.current) {
            return;
        }

        console.log(`data-foo is ${ref.current.dataset.foo}`);
    }, []);

    return <div ref={ref} data-foo="foo">I have a data attribute</div>;
};

const App = () => (
    <Foo/>
);

ReactDOM.render(<App/>, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.min.js"></script>

<div id="app"></div>
1
zero298 21 avril 2020 à 15:48