Импортирование пути svg из другого компонента с использованием activ.js

Question

У меня есть несколько значков, хранящихся в компоненте под оператором switch. Исходя из условия, я хочу отобразить этот значок в функции рендеринга другого компонента. Если я вручную добавлю svg и элемент path, значок будет отображаться правильно. Но я хотел бы оптимизировать мой код так, чтобы при вызове функции с правильными параметрами она извлекала соответствующий элемент svg вместе с элементом path.

Первый компонент (где находятся значки):

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

}

В приведенном выше коде регистр CANCELED отлично отображает значок, так как я вручную добавляю элемент path. Но я хотел бы оптимизировать код, так как мне нужно было бы отображать значки в разных местах, а добавление элемента пути в каждой позиции делало бы код утомительным. Если я вызываю функцию getSymbol и передаю имя значка в качестве параметра, он ничего не отображает. Даже если параметр не соответствует ни одному случаю, он даже не отображает элемент круга по умолчанию.

Есть ли способ извлечь элемент svg и path более чистым способом из другого компонента?

Answer 1

В вашей функции getSymbolPlotly вы уничтожаете объект с именем symbol 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>
  );

Я создал Codesandbox с работающим демо здесь .