How to get access to the underlying component of a react html element?

Question

I'd like to create a <Breadcrumb> component which receives a <Link> component as a dependency.

This could be a <Link> component from react-router-dom or an <a> component.

How can I get direct access to the <a> component so that I may inject it into <Breadcrumb>?

Here is a brief example of what I'm trying to do.

const createBreadcrumbComponent = (Link) => {
    return function Breadcrumb(props) {
        // return JSX that renders this Link component 
        // A basic example:
        return <Link href="/">{"Home"}</Link>
    }
}

An example of using this with react-router-doms own <Link component:

// import {Link} from 'react-router-dom';
const Breadcrumb = createBreadcrumbComponent(Link);

I would like do the same as above, but substitute Link with a. Unfortunately there doesn't seem to be an actual component that represents a (with React.createElement() we pass the string "a" instead).

Can you provide a code example of what you've tried so far?

katamaster818
– katamaster818

2020-10-22 19:57:02 +00:00
Commented Oct 22, 2020 at 19:57 — katamaster818
– katamaster818, Commented Oct 22, 2020 at 19:57

Rudraprasad Das · Accepted Answer · 2020-11-02 10:34:08Z

3

You can always use ref to access the underlying DOM element from a React Component. But, this is not always the case.

Following are the cases, which will enable you to use ref -

The component is a native HTML element, for eg - a, div, img etc.
The React native component is wrapped with a forwardRef. This doc explains it nicely - https://reactjs.org/docs/forwarding-refs.html

An example for using ref can be seen below -

import React, {useRef} from 'react';

const Comp = () => {
  const elRef = useRef();

  useEffect(() => {
    console.log(elRef.current); // -> the p element
  }, []);

  return <p ref={elRef}>Hello</p>;
}

There is a third way of getting the underlying element, but I don't recommend it since it is deprecated. You can use ReactDOM.findDOMNode(Component). This is a part of react-dom package. You can read more about it here - https://reactjs.org/docs/react-dom.html#finddomnode

edited Nov 2, 2020 at 10:34

answered Oct 22, 2020 at 20:22

Rudraprasad Das

3782 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shane Callanan · Accepted Answer · 2020-10-22 20:46:48Z

0

I think the solution is to create a wrapper around <a>, for instance:

const A = (props) => <a {...props}/>;
const Breadcrumb = createBreadcrumbComponent(A);

I was hoping there would be a way to obtain a component directly from React that already encompasses the <a> element

answered Oct 22, 2020 at 20:46

Shane Callanan

5314 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to get access to the underlying component of a react html element?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related