Question

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

我将svg导入为React组件

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

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

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()本机React方法中调用componentDidMont()方法，如下所示：

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

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

在React中样式化SVG路径

1 个答案: