¿Cómo puedo llamar al componente reaccionar js en setContent? En realidad, quiero insertar un botón en el folleto emergente que haga clic en él y llame a un componente de reacción. Sé que "reactDomserver.rendertostring" es un método para encadenar un componente a HTML. Pero no se puede hacer clic en el botón para llamar a otro componente cuando el componente cambia a HTML. Agradecería si alguien me puede ayudar.
El código de muestra está arriba:
// adding mouse hover popup hoverPopup = L.popup({ closeButton: false, className: "hover-popup" }); hoverPopup.setContent(`<div> <div class="icon"> <ul class="menu"> <li class="spread"> <button onclick={()=>CustomComponent()}> Test </button> /////// Here is Error </li> </div>`); marker.on('mouseover', function (e) { hoverPopup.setLatLng(e.latlng); hoverPopup.openOn(MAP); });Primero, debe cambiar la función "onclick" dentro del contenido Html. Es html puro y no la sintaxis correcta.
Equivocado:
onclick={()=>CustomComponent()}Correcto:
onclick="CustomComponent()"Después de eso, puede escuchar los cambios de contenido con useEffect y, si existe contenido, puede agregar un evento de clic con javascript puro. Como esto;
Demostración: https://codesandbox.io/s/stackoverflow-69979099-35hyb?file=/src/App.js
export default function App() { const [content, setContent] = useState(null); useEffect(() => { if (content) { document.getElementById("btn").onclick = (e) => { e.preventDefault(); eval(e.target.getAttribute("onclick")); }; } }, [content]); const CustomComponent = () => { alert("Custom Component Func!"); }; return ( <div className="App"> <button onClick={() => {setContent(`<div> <div class="icon"> <ul class="menu"> <li class="spread"> <button id="btn" onclick="CustomComponent()"> Test </button> </li> </div>`); }} > Show Content </button> <button>Hide Content</button> <hr /> {content && <div dangerouslySetInnerHTML={{ __html: content }} />} <div></div> </div> ); }