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

Posted 2023-02-25

【中文标题】如何在不渲染的情况下从 forwardref 组件添加 ref？

【英文标题】：how to add ref from forwardref component without rendering?

【发布时间】：2021-10-31 11:23:56

【问题描述】：

我将一个 dom 节点传递给一个地图框弹出窗口。 我有一个组件 P.js，它由 forward ref as 组成

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))

)  

如何将引用渲染传递到另一个组件并在另一个组件中运行？

在我的情况下，我尝试制作另一个 const 来增加价值

const p = <P ref=pRef/>

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

【问题讨论】：

你的意思是像twitter.com/realamirhe/status/1362457891609919489这样的东西吗？

@Amirhe 我认为它确实有效，将

我想我可以解决它，如果有任何灰色区域或问题，请告诉我

【参考方案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