मैं एक मैपबॉक्स पॉपअप में डोम नोड पास कर रहा हूं। मेरे पास एक घटक P.js है जिसमें आगे रेफरी शामिल है

import React  from "react";

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

मैं इसे App.js as . में आयात कर रहा हूं

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 p = <P ref={pRef}/>

मुझे लगता है, यह किसी अन्य घटक से रेफरी पास करने का तरीका नहीं है, इसलिए इसे प्रस्तुत नहीं किया जाता है। क्या मार्कर घटक में कोई तरीका है, कि अगर मैं डोम सामग्री लोड करने के बजाय रेफरी पास कर सकता हूं। मदद के लिए शुक्रिया।

1
Because i hate myself 31 अक्टूबर 2021, 14:23
1
क्या आपका मतलब twitter.com/realamirhe/status/1362457891609919489 जैसा कुछ है?
 – 
Amirhe
31 अक्टूबर 2021, 15:06
मुझे लगता है कि यह काम किया, app.js की वापसी पर

डालने पर, लेकिन इसने डोम पी सामग्री को पूरे मानचित्र पर दृश्यमान बना दिया, उनका, क्या कोई तरीका है, इसे बदले में उपयोग किए बिना, कृपया, धन्यवाद आप

 – 
pong
31 अक्टूबर 2021, 17:53
मुझे लगता है कि मैं इसे हल कर सकता हूं, मुझे बताएं कि क्या कोई ग्रे क्षेत्र या समस्या है
 – 
Amirhe
31 अक्टूबर 2021, 19:14

1 उत्तर

सबसे बढ़िया उत्तर

मेरा सुझाव है कि react-mapbox-glmapbox-gl के आसपास इस प्रतिक्रिया आवरण का उपयोग करें। ए>

आप इस ट्वीट में बताए गए तरीके को अपना सकते हैं और इसे बनाने के लिए अपने P टैग में कुछ स्टाइल डाल सकते हैं। वैसे अदृश्य

<P class="hide">Hello world</P>
.hide { display: none } /* or any other that fits for you e.g. visibility hidden */

आप अपने घटक को तुरंत HTML स्ट्रिंग में बदलने के लिए renderToString का भी उपयोग कर सकते हैं।

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 है।

आप पैकेज द्वारा सुझाए गए अपने अनुच्छेद घटक के ठीक उसी स्ट्रिंग प्रतिनिधित्व को भी पास कर सकते हैं। डॉक्टर

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

यदि आप जेएस पैकेज डुओ के साथ विरासत के मुद्दे पर काम करना चाहते हैं, तो एक पैकेज भी है जो आपको पैकेज के चारों ओर एक कस्टम छोटे प्रतिक्रिया रैपर जोड़ने में मदद करता है जिसे react-aptor

1
Amirhe 31 अक्टूबर 2021, 19:14