在 React 中设置 SVG 路径

Question

我是 React 的新手，我正在尝试将 svg 图像添加到我的组件并为其每个路径添加动态样式。但是，我在这样做时遇到了问题。我正在使用 create-react-app

我将我的 svg 作为 React 组件导入

import { ReactComponent as SVGimg} from './img/svg-img.svg';

并在我的渲染中使用它。我希望通过使用我在纯 HTML/CSS/JS 上工作的 for...of 循环为所有路径添加样式

render() {
  const svgImg = document.querySelectorAll('svg path')
  for (let path of svgImg) {
    path.classList.add('some-class');
  }

  return(
    <div>
      <SVGimg/>
    </div>
  );
}

我还想提一下，SVG 有很多路径

Answer 1

您可以在 svg 中添加一个类，例如：<svg><path class='pathClass'></svg>

然后在你的 React 组件中你可以通过调用来获取路径：const path = document.getElementsByClassName('pathClass');

然后像这样添加类：path.classList.add('some-class');

更新

由于您使用的是类组件，因此您可以在 componentDidMont() 原生 React 方法中调用 classList.add() 方法，如下所示：

class YourComponent extends Component {
  constructor(props) {
    super(props);

    this.svgRef = React.createRef();
  }

  componentDidMount() {
    this.svgRef.current.classList.add('some-class');
  }

  render() {
    return(
      <div>
        <SVGimg ref={this.svgRef} />
      </div>
    );
  }
}

这将在渲染方法完成后立即触发。