React & SVG: w jaki sposób mogę włączyć obsługę <path>?

Question

To co React SVG obsługuje obecnie: http://facebook.github.io/react/docs/tags-and-attributes.html#svg-attributes

Próbuję dowiedzieć się, jak zrobić kształt narysowałem pomocą klikalne ścieżki SVG. Jeśli istnieje inny sposób narysowania kształtu, który można klikać, to też działa.

Dzięki!

Answer 1

Miałem podobny problem z reagowaniem, starałem się obsłużyć zdarzenie onclick dla svg.

Proste css rozwiązany problem dla mnie:

svg { 
    pointer-events: none; 
} 

Answer 2

zrobiłem to w ten sposób:

tylko przy użyciu polyline na przykład, może to być dowolny element SVG.

export default class Polyline extends React.Component { 

    componentDidMount() { 
     this.polyline.addEventListener('click', this.props.onClick); 
    } 

    componentWillUnmount(){ 
     this.polyline.removeEventListener('click', this.props.onClick); 
    } 

    render() { 
     const {points, style, markerEnd} = this.props; 
     return <polyline points={points} 
        ref={ref => this.polyline = ref} 
        style={style} 
        markerEnd={markerEnd}/>; 
    } 
} 

• dostać ref w odnośniku zwrotnego
• na componentDidMount dodać zdarzenie click słuchacza ref
• Usuń wydarzenie słuchacza w componentWillUnmount

Answer 3

Można użyć onClick jak to zrobić z drugiej DOM elementy.

Answer 4

I zawijać moja SVG z div i zastosować wszelkie atrybuty, które pragnę (kliknij teleskopowe, kolory wypełnienia, zajęcia, szerokość, itd ..), like so (odnośnik skrzypce):

import React, { PropTypes } from 'react' 

function XMark({ width, height, fill, onClick }) { 
    return (
     <div className="xmark-container" onClick={onClick}> 
      <svg className='xmark' viewBox="67 8 8 8" width={width} height={height} version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink"> 
       <polygon stroke="none" fill={fill} fillRule="evenodd" points="74.0856176 9.4287633 71.5143809 12 74.0856176 14.5712367 73.5712367 15.0856176 71 12.5143809 68.4287633 15.0856176 67.9143824 14.5712367 70.4856191 12 67.9143824 9.4287633 68.4287633 8.91438245 71 11.4856191 73.5712367 8.91438245 74.0856176 9.4287633 74.0856176 9.4287633 74.0856176 9.4287633" /> 
      </svg> 
     </div> 
    ) 
} 
XMark.propTypes = { 
    width: PropTypes.number, 
    height: PropTypes.number, 
    fill: PropTypes.string, 
    onClick: PropTypes.func, 
} 
XMark.defaultProps = { 
    width: 8, 
    height: 8, 
    fill: '#979797', 
    onClick: null, 
} 
export default XMark 

Można z oczywiście porzuć wrapper i zastosuj element onClick do elementu svg, ale odkryłem, że to podejście działa dobrze dla mnie! (Próbuję również używać czystych funkcji, jeśli to możliwe https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc)