使用 react.js 从另一个组件导入 svg 路径

Question

我在 switch 语句下的一个组件中存储了多个图标。根据一个条件，我想在另一个组件的渲染功能中显示该图标。如果我手动添加 svg 和 path 元素，则图标会正确显示。但是我想优化我的代码，这样当我使用正确的参数调用函数时，它会提取相应的 svg 元素及其路径元素。

第一个组件（图标所在的位置）：

export function getSymbolPlotly(symbol) { // eslint-disable-line
  let elm;
  const { color, shape } = symbol;

 switch (shape) {
    case 'x-dot':
      elm = <path
        className="point"
        transform="translate(8,8)"
        d="M0,3.39l3.39,3.39l3.39,-3.39l-3.39,-3.39l3.39,-3.39l-3.39,-3.39l-3.39,3.39l-3.39,-3.39l-3.39,3.39l3.39,3.39l-3.39,3.39l3.39,3.39ZM0,0.5L0.5,0L0,-0.5L-0.5,0Z"
        style={{
          opacity: 1,
          strokeWidth: '0px',
          fill: color,
          fillOpacity: 1
        }}></path>;
      break;
    case 'square':
      elm = <path
        className="point"
        transform="translate(8,8)"
        d="M6,6H-6V-6H6Z"
        style={{
          opacity: 1,
          strokeWidth: '0px',
          fill: color,
          fillOpacity: 1
        }}></path>;
      break;
    case 'hourglass':
      elm = <path
        className="point"
        transform="translate(6,8)"
        d="M6,6H-6L6,-6H-6Z"
        style={{
          opacity: 1,
          strokeWidth: '0px',
          fill: color,
          fillOpacity: 1
        }}></path>;
      break;
default:
      elm = <circle cx="6" cy="6" r="6" transform="translate(0,2)" fill={color}></circle>;
}````

Second component(render function where I need to display icons):
````switch (user.processState) {
        case 'DENIED':
            return <span><svg style={{ width: '15px', height: '15px' }}>
                    {getSymbolPlotly('hourglass')}
                  </svg></span>
        case 'CANCELLED':
            return <span><svg style={{ width: '15px', height: '15px' }}>
              <path className="point"
                      transform="translate(8,8)"
                      d="M0,3.39l3.39,3.39l3.39,-3.39l-3.39,-3.39l3.39,-3.39l-3.39,-3.39l-3.39,3.39l-3.39,-3.39l-3.39,3.39l3.39,3.39l-3.39,3.39l3.39,3.39ZM0,0.5L0.5,0L0,-0.5L-0.5,0Z"
                      style={{
                        opacity: 1,
                        strokeWidth: '0px',
                        fill: '#e5004c',
                        fillOpacity: 1
                      }}></path>
                  </svg>{this.state.message}</span>;

}

在上面的代码中，当我手动添加路径元素时，case CANCELED 完美地显示了图标。但是我想优化代码，因为我需要在多个位置显示图标并在每个位置添加路径元素会使代码变得乏味。如果我调用 getSymbol 函数并将图标的名称作为参数传递，它不会显示任何内容。即使参数不匹配任何大小写，它也不会显示默认的圆形元素。

有没有办法从另一个组件中以更简洁的方式提取 svg 和 path 元素？

Answer 1

在您的getSymbolPlotly 函数中，您解构了一个名为符号const { color, shape } = symbol; 的对象。当您调用该函数时，您传递了一个名为getSymbolPlotly('hourglass') 的字符串，出现第一个错误。

我不知道您是否粘贴了 getSymbolPlotly 函数的整个代码，但您还必须返回该元素。要以更“干净”的方式提取，您可以喜欢这个。

import React from "react";
export function getSymbolPlotly(symbol) {
  // eslint-disable-line
  const { color, shape } = symbol;

  switch (shape) {
    case "x-dot":
      return (
        <path
          className="point"
          transform="translate(8,8)"
          d="M0,3.39l3.39,3.39l3.39,-3.39l-3.39,-3.39l3.39,-3.39l-3.39,-3.39l-3.39,3.39l-3.39,-3.39l-3.39,3.39l3.39,3.39l-3.39,3.39l3.39,3.39ZM0,0.5L0.5,0L0,-0.5L-0.5,0Z"
          style={{
            opacity: 1,
            strokeWidth: "0px",
            fill: color,
            fillOpacity: 1
          }}
        />
      );
    case "square":
      return (
        <path
          className="point"
          transform="translate(8,8)"
          d="M6,6H-6V-6H6Z"
          style={{
            opacity: 1,
            strokeWidth: "0px",
            fill: color,
            fillOpacity: 1
          }}
        />
      );
    case "hourglass":
      return (
        <path
          className="point"
          transform="translate(6,8)"
          d="M6,6H-6L6,-6H-6Z"
          style={{
            opacity: 1,
            strokeWidth: "0px",
            fill: color,
            fillOpacity: 1
          }}
        />
      );

    default:
      return (
        <circle cx="6" cy="6" r="6" transform="translate(0,2)" fill={color} />
      );
  }
}

在其他一些组件中，您可以这样称呼它。

return (
    <div className="App">
      <div>
        <svg style={{ width: "15px", height: "15px" }}>
          {getSymbolPlotly({ shape: "hourglass", color: "red" })}
        </svg>
      </div>
      <div>
        <svg style={{ width: "15px", height: "15px" }}>
          {getSymbolPlotly({ shape: "x-dot", color: "purple" })}
        </svg>
      </div>
    </div>
  );

我创建了一个带有 working demo here 的 Codesandbox。