给已定义的<svg>添加class属性

Question

假设我有图标：

//myicons.js
import React from "react";

export const ico = {
    someIcon:
        <svg ... >
           ...
        </svg>,

以及一个使用一些图标的组件：

import React, { Component } from "react";
import { ico } from "./myicons";

export class MyIcon extends Component {
    render () {
        return ico[this.props.which];
    }
}

还有一些地方使用了这个图标：

//some render func
return (
    <div ... >
        <MyIcon which="someIcon"/>
        ...
    </div>
);

假设我要添加一个CSS类：

<MyIcon which="someIcon" className="blahblah" />

如何使DOM元素包含类为blahblah的<svg class="blahblah"，也就是说，如何将<MyIcon className="blahblah"中给出的blahblah类添加到由ico[this.props.which]返回的<svg标签的class=属性中？

如果有帮助的话，这是render函数所返回的内容：

- Caius Jard

---

（我知道我可以像<div className={this.props.className}>ico[...]</div>那样包装ico[...]，但我很好奇是否可以编程地编辑ico[...]返回的svg片段..） - Caius Jard

React将MyIcon组件中的className视为属性，因此您不能在组件中分配className。您可以将其包装在具有className的div中。 - ValeriF21

Answer 1

我会这样写：

import React from "react";

const getIconWithClass = (type, className) => {
  switch (type) {
    case "iconA":
      return <svg className={className}>iconA</svg>;
    case "iconB":
      return <svg className={className}>iconB</svg>;
    default:
      return null;
  }
};
class MyIcon extends React.Component {
  render() {
    const { which, className } = this.props;
    return getIconWithClass(which, className);
  }
}

const App = () => {
  return (
    <div>
      <MyIcon which="iconA" className="bla-bla" />
    </div>
  );
};

export default App;

- Konstantin Modin

---

我曾经想知道是否需要将它传递给图标提供程序，谢谢！ - Caius Jard