javascript - 在 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'); 更新
由于您使用的是类组件，您可以调用 classList.add() componentDidMont()里面的方法像这样的原生 React 方法:

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>
    );
  }
}

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