React -通过道具控制SVG填充颜色的能力

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [fillColor, setFillColor] = useState('red');

  const handleColorChange = (color) => {
    setFillColor(color);
  };

  return (
    <div>
      <ChildComponent fillColor={fillColor} onColorChange={handleColorChange} />
    </div>
  );
}

export default ParentComponent;

// 子组件
import React from 'react';

function ChildComponent({ fillColor, onColorChange }) {
  const handleButtonClick = () => {
    onColorChange('blue');
  };

  return (
    <div>
      <svg>
        <path fill={fillColor} d="M10 10h10v10h-10z" />
      </svg>
      <button onClick={handleButtonClick}>Change Color</button>
    </div>
  );
}

export default ChildComponent;