javascript - 将 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 最终包含 <svg class="blahblah"即如何添加 <MyIcon className="blahblah" 中给出的 blahblah 类到 class= <svg 的属性由 ico[this.props.which] 返回？

如果有帮助，这就是最终从渲染返回的内容:

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;