Início / coding / Perguntas / 76926981
Accepted
MeltingDog
Asked: 2023-08-18 14:41:48 +0800 CST

Como faço para 'construir' um elemento HTML em uma variável com adereços?

  • 772

Estou recriando um componente de botão HTML existente que usa o <svg>elemento e uma folha de sprite de ícone para ícones.

Quero poder criar o <svg>elemento se um iconStringprop tiver um valor e adicioná-lo ao conteúdo do botão.

Estou tendo dificuldade em "construir" esse <svg>elemento dentro de uma variável, ex:

  if (iconString && label) {
    buttonContent = <svg className="btn-icon"><use xlink:href="/svgs/icons.svg#' + iconString + '"></use></svg> + label;
  }

Não consigo encontrar ou descobrir a maneira correta de usar <svg>os <use>elementos e junto com os adereços iconStringe label.

Alguém seria capaz de me apontar na direção certa?

Meu código completo é:

export const button = ({ type, size, iconString, label, ...props }) => {
  let buttonContent = '';
  if (iconString && label) {
    buttonContent = <svg className="btn-icon"><use xlink:href="/svgs/icons.svg#' + iconString + '"></use></svg> + label;
  }
  else {
    buttonContent = label;
  }

  return (
    <button
      type="button"
      className={['btn', `btn-${size}`, `btn-${type}`].join(' ')}
      {...props}
    >
      {buttonContent}
    </button>
  );
};
javascript

1 respostas

  1. Best Answer

    Parece que você está no caminho certo, mas há um problema de sintaxe em como você está tentando construir o elemento SVG e seu elemento. No JSX, você precisa usar chaves {} para incorporar expressões JavaScript. Além disso, você deve usar o atributo xlinkHref em vez de xlink:href para a referência xlink do elemento. Aqui está a versão corrigida do seu código:

    export const Button = ({ type, size, iconString, label, ...props }) => {
  let buttonContent = '';
  if (iconString && label) {
    buttonContent = (
      <>
        <svg className="btn-icon">
          <use xlinkHref={`/svgs/icons.svg#${iconString}`} />
        </svg>
        {label}
      </>
    );
  } else {
    buttonContent = label;
  }

  return (
    <button
      type="button"
      className={['btn', `btn-${size}`, `btn-${type}`].join(' ')}
      {...props}
    >
      {buttonContent}
    </button>
  );
};

    Alterações feitas no seu código:

    O nome do componente é capitalizado (Botão) de acordo com a convenção para componentes React. A estrutura SVG é incluída em um fragmento JSX (<>...</>) para permitir que vários elementos sejam retornados. O atributo xlinkHref é usado para definir a referência do sprite SVG. Com essas alterações, seu código deve gerar corretamente o ícone SVG junto com o rótulo para seu componente de botão quando os props iconString e label são fornecidos.

    • 1

relate perguntas