SVG元素内的React组件

import React from 'react';

const MyComponent = () => (
  <svg width="100" height="100">
    <rect x="10" y="10" width="80" height="80" fill="blue" />
    <text x="50" y="50" textAnchor="middle" dominantBaseline="middle" fill="white">
      Hello
    </text>
  </svg>
);

export default MyComponent;

import React from 'react';

const MyComponent = () => (
  <svg width="100" height="100">
    <rect x="10" y="10" width="80" height="80" fill="blue" onClick={() => alert('Clicked!')} />
  </svg>
);

export default MyComponent;

import React from 'react';
import './MyComponent.css';

const MyComponent = () => (
  <svg width="100" height="100">
    <rect x="10" y="10" width="80" height="80" className="my-rect" />
  </svg>
);

export default MyComponent;

/* MyComponent.css */
.my-rect {
  fill: blue;
}