मैं एक मैपबॉक्स पॉपअप में डोम नोड पास कर रहा हूं। मेरे पास एक घटक 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 उत्तर
मेरा सुझाव है कि 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
संबंधित सवाल
नए सवाल
reactjs
प्रतिक्रिया उपयोगकर्ता इंटरफ़ेस के निर्माण के लिए एक जावास्क्रिप्ट पुस्तकालय है। यह एक घोषणात्मक, घटक-आधारित प्रतिमान का उपयोग करता है और इसका उद्देश्य कुशल और लचीला दोनों है।
डालने पर, लेकिन इसने डोम पी सामग्री को पूरे मानचित्र पर दृश्यमान बना दिया, उनका, क्या कोई तरीका है, इसे बदले में उपयोग किए बिना, कृपया, धन्यवाद आप