Javascript 如何访问react html元素的底层组件？

我想创建一个

组件，它接收一个

组件作为依赖项

这可能是来自

react router dom

的

组件或

组件

如何直接访问

组件，以便将其插入

---

下面是我试图做的一个简单的例子

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

---

我想做与上面相同的事情，但是用

a

替换

Link

。不幸的是，似乎没有表示

a

的实际组件（使用

React.createElement（）

我们传递字符串“a”）

您可以始终使用

ref

从React组件访问底层DOM元素。但是，情况并非总是如此

以下是使您能够使用

ref

-

该组件是一个本地HTML元素，例如-

a

、

div

、

img

等

React本机组件用

forwardRef

包装。这个医生解释得很好-

下面可以看到使用

ref

的示例-

import React, {useRef} from 'react';

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

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

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

import React，{useRef}来自“React”；
常数Comp=（）=>{
const elRef=useRef（）；
useffect（（）=>{
console.log（elRef.current）；//->p元素
}, []);
return
你好
；
}

有第三种获取底层元素的方法，但我不推荐使用，因为它已被弃用。您可以使用

ReactDOM.findDOMNode（组件）

。这是

react dom

包的一部分。

---

您可以在此处阅读更多信息-

我认为解决方案是在

周围创建一个包装器，例如：

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

const A=（道具）=>；
const Breadcrumb=createbreadcrumb组件（A）；

---

我希望有一种方法可以直接从React中获得一个已经包含

元素的组件

您能提供一个您迄今为止尝试过的代码示例吗？

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