Lo que estoy tratando de hacer:
Problemas:
Agradecería ayuda con esto.
const { Container, Row, Col} = ReactBootstrap; function Library(props){ function handleMouseEnter(e){ e.style.background = 'blue'; var targetNode = e.querySelector(`#content`); ReactDOM.render( <svg width="0.75rem" height="0.75rem" className="Layer_1" x="0px" y="0px" viewBox="0 0 472.615 472.615" fill="white"> <polygon onClick={e => console.log('clicked')} points="50.273,0 50.273,472.615 422.342,236.308"/> </svg> , targetNode); } function handleMouseLeave(e){ e.style.background = ''; var targetNode = e.querySelector(`#content`); ReactDOM.render( "hover over me and click the button!" , targetNode); } return( <Container> <Row onMouseEnter={e => handleMouseEnter(e.target.closest('.row'))} onMouseLeave={e => handleMouseLeave(e.target.closest('.row'))} > <Col> <div id="content"> hover over me and click the button! </div> </Col> </Row> </Container> ) } ReactDOM.render( <Library/>, document.getElementById('root') ); .row{ background:red; } svg{ pointer-events:none; } <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script> <div id="root"></div>Puede crear un archivo .svg y almacenar su svg en ese archivo. ejemplo
Icon.svg
<svg width="0.75rem" height="0.75rem" className="Layer_1" x="0px" y="0px" viewBox="0 0 472.615 472.615" fill="white"> <polygon points="50.273,0 50.273,472.615 422.342,236.308"/> </svg> Y puede convertir su Icon.svg en su ejemplo de componente:
YourComponent.jsx
import { ReactComponent as Icon } from "./Icon.svg"; const YourComponent = () => { return ( <div> <Icon onClick={e => console.log('clicked')} /> </div> ); }; export default YourComponent; y felicidades, ahora puede hacer clic en su Icon.svg .
en la mejor práctica, si desea importar algunas imágenes .svg , debe importarlas como ReactComponent
Tal vez puedas probar esto usando useState para la representación condicional
import { useState } from "react"; import { ReactComponent as Icon } from "./Icon.svg"; const YourApp = () => { const [onHover, setOnHover] = useState(false); const handleMouseEnter = () => { setOnHover(true); }; const handleMouseLeave = () => { setOnHover(false); }; return ( <div style={onHover ? { background: "blue" } : { background: "red" }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {onHover && <Icon onClick={(e) => console.log("clicked")} />} hover over me and click the button! </div> ); }; export default YourApp;Creo que solucioné el problema editando onMouseLeave para verificar si el elemento que lo activó era un SVG o uno de sus elementos secundarios, si lo es, cuéntelo como un falso positivo. Ahora se puede hacer clic en el botón y no desaparece si pasa el cursor sobre él.
const { Container, Row, Col} = ReactBootstrap; function Library(props){ function handleMouseEnter(row){ row.style.background = 'blue'; var targetNode = row.querySelector(`#content`); ReactDOM.render( <svg onClick={e => console.log('clicked')} width="0.75rem" height="0.75rem" className="Layer_1" x="0px" y="0px" viewBox="0 0 472.615 472.615" fill="white"> <polygon points="50.273,0 50.273,472.615 422.342,236.308"/> </svg> , targetNode); } function handleMouseLeave(e, row){ if(e.relatedTarget.tagName === 'svg' || e.relatedTarget.tagName === 'polygon') return row.style.background = ''; var targetNode = row.querySelector(`#content`); ReactDOM.render( "hover over me and click the button!" , targetNode); } return( <Container> <Row onMouseEnter={e => handleMouseEnter(e.target.closest('.row'))} onMouseLeave={e => handleMouseLeave(e, e.target.closest('.row'))} > <Col> <div id="content"> hover over me and click the button! </div> </Col> </Row> </Container> ) } ReactDOM.render( <Library/>, document.getElementById('root') ); .row{ background:red; } <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossorigin></script> <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script> <div id="root"></div>