Início / coding / Perguntas / 79551956
Accepted
tearfur
Asked: 2025-04-03 11:48:42 +0800 CST

styled-components TSX: Como gerar uma versão prop transitória de uma interface prop

  • 772

Estou tentando consertar um pedaço de código TSX que compartilha uma interface prop entre um componente React e um styled <div>, porque o styled <div>gera avisos como este:

Aviso: O React não reconhece o aAprop em um elemento DOM. Se você quiser intencionalmente que ele apareça no DOM como um atributo personalizado, escreva-o em letras minúsculas aa. Se você o passou acidentalmente de um componente pai, remova-o do elemento DOM.

O código se parece com isto:

// Comp.tsx
interface Props {
  aA: boolean;
  bB: string;
  cC: '1' | '2';
}

const StyledDiv = styled.div<Props>`
  background: ${({ aA }) => aA ? 'black' | 'white'};
  // ...
`;

const Comp = ({ aA, bB, cC}: Props) => {
  if (aA) {
   // do something
  } else {
   // do something else
  }

  return <StyledDiv aA={aA} bB={bB} cC={cC}>{/*...*/}</StyledDiv>;
};

export default Comp;

// StyledComp.tsx
const StyledComp = styled(Comp)<{ dD: string, eE: number }>`
  // ...
`;

export default StyledComp;

Qual é a melhor maneira de fazer isso? Estou pensando em criar outra interface DivPropsque espelhe Props, mas com props transientes:

interface DivProps {
  $aA: boolean;
  $bB: string;
  $cC: '1' | '2';
}

const StyledDiv = styled.div<DivProps>`
  background: ${({ $aA }) => $aA ? 'black' | 'white'};
  // ...
`;

Não gosto muito da ideia porque teria que atualizar ambos Props e DivPropsse houver alguma mudança no futuro. Mas se essa for a única solução, então, por favor, me avise também. Obrigado!

reactjs

2 respostas

  1. Best Answer

    Este é o caso de uso para a shouldForwardPropopção do .withConfig()método:

    Este é um mecanismo de filtragem mais dinâmico e granular do que props transientes. É útil em situações em que vários componentes de ordem superior estão sendo compostos juntos e por acaso compartilham o mesmo nome de prop. shouldForwardPropfunciona muito como o callback de predicado de Array.filter. Um prop que falha no teste não é passado para componentes subjacentes, assim como um prop transiente.

    No seu caso:

    const StyledDiv = styled.div.withConfig({
  shouldForwardProp: (prop) => !["aA", "bB", "cC"].includes(prop)
})<Props>`
  background: ${({ aA }) => aA ? 'black' : 'white'};
  // ...
`;

    Uma solução mais geral seria configurar um shouldForwardPropagradecimento global para StyleSheetManager:

    import isPropValid from '@emotion/is-prop-valid';
import { StyleSheetManager } from 'styled-components';


function MyApp() {
    return (
        <StyleSheetManager shouldForwardProp={shouldForwardProp}>
            {/* other providers or your application's JSX */}
        </StyleSheetManager>
    )
}


// This implements the default behavior from styled-components v5
function shouldForwardProp(propName, target) {
    if (typeof target === "string") {
        // For HTML elements, forward the prop if it is a valid HTML attribute
        return isPropValid(propName);
    }
    // For other elements, forward all props
    return true;
}

    Veja também:

    Se você estiver pronto para alterar a API do seu StyledDivpara usar o $sinal para propriedades transitórias, mas quiser evitar ter que manter a DivPropsinterface manualmente, você pode gerá-la automaticamente graças aos Tipos Mapeados e Remapeamento de Chaves do TypeScript :

    type DivProps = {
  [Key in keyof Props as `$${Key}`]: Props[Key];
};

const StyledDiv2 = styled.div<DivProps>`
  background: ${({ $aA }) => ($aA ? 'black' : 'white')};
  // ...
`;

const Comp = ({ aA, bB, cC }: Props) => {
  // ...
  return (
    <>
      <StyledDiv aA={aA} bB={bB} cC={cC}>
        {/*...*/}
      </StyledDiv>
      <StyledDiv2 $aA={aA} $bB={bB} $cC={cC}>
        {/*...*/}
      </StyledDiv2>
    </>
  );
};

    Demonstração: https://stackblitz.com/edit/react-ts-4dablowz?file=App.tsx

    • 1

  2. Eu diria que sua sugestão de ter uma "duplicata" DivPropsé, na verdade, o caminho certo a seguir; isso é o que eu chamaria de "duplicação acidental".

    O problema é que há boas razões para que esses dois tipos sejam diferentes:

    • Propsdescreve os adereços de Comp, então você deve usar os adereços e os tipos que fazem mais sentido para alguém que usa seu Compcomponente,
    • DivPropsdescreve os props transitórios usados ​​pelo próprio componente estilizado, então você deve usar os props e tipos que fazem mais sentido para alguém que escreve o CSS.

    Pode ser que eles sejam basicamente os mesmos em alguns casos, mas não necessariamente. Talvez você queira um prop adicional para Compque seja usado para alternar entre diferentes componentes estilizados? Talvez você queira enviar um booleano isSelectedpara Compque será transformado em um backgroundColor? Talvez seu componente estilizado seja reutilizável fora de Compe aceite mais props que você só quer codificar para valores específicos dentro de Comp.

    Há muitos motivos pelos quais você pode querer que eles sejam diferentes, então tentar reutilizar o mesmo tipo pode impedir que você melhore a API dos seus componentes no futuro.

    • 0

relate perguntas