如何在不渲染的情况下从 forwardref 组件添加 ref？

Question

我正在将 dom 节点传递给 mapbox 弹出窗口。我有一个组件 P.js，它由前向引用组成

import React  from "react";

const P = React.forwardRef((props, ref) => {
  return  <p {...props} ref={ref}></p>
})
export default P;

我在 App.js 中将其导入为

import P from './P';
......

const pRef = useRef(null)
console.log(pRef)
const p = <P ref={pRef}/>
console.log(pREf)

const App = () => {
useEffect(() => {
..... //codes
marker.setPopup(new mapboxgl.Popup().setDOMContent(pRef.current))

})  

}

如何在另一个组件上传递 ref 渲染并在另一个组件上传递运行？

就我而言，我尝试创建另一个 const 来增加值

const p = <P ref={pRef}/>

我认为，这不是从另一个组件传递 ref 的方式，因此它不会被渲染。 Marker 组件中是否有任何方法，我可以通过 ref if 而不是加载 dom 内容。谢谢你的帮助。

Answer 1

我强烈建议在名为 react-mapbox-gl

的 mapbox-gl 周围使用这个反应包装器

你可以按照this tweet中提到的方法，在你的P标签中添加一些样式，顺便让它不可见

<P class="hide">Hello world</P>

.hide { display: none } /* or any other that fits for you e.g. visibility hidden */

您还可以使用 renderToString 将您的组件即时转换为 HTML 字符串。

import * as React from 'react';
import { renderToString } from 'react-dom/server';
import mapboxgl from 'mapbox-gl';

const P = React.forwardRef((props, ref) => {
  return <p {...props} ref={ref}></p>;
});

export default function App() {
  React.useEffect(() => {
    marker.setPopup(
      new mapboxgl.Popup().setDOMContent(
        // render your Paragraph component exactly to html
        renderToString(<P>Hello world</P>),
      ),
    );
  });

  return <div id="map" />;
}

这里 codesandbox 展示了它的效果。

您还可以传递与包 doc

建议的段落组件完全相同的字符串表示形式

const popup = new mapboxgl.Popup()
.setHTML('<h1>Hello World!</h1>') // here is the string representation
.addTo(map);

如果您想使用 js 包解决遗留问题，还有一个包可以帮助您在包周围添加自定义微型反应包装器以使用名为 react-aptor

如何在不渲染的情况下从 forwardref 组件添加 ref？

how to add ref from forwardref component without rendering?

mapbox

reactjs

use-ref