Início / user-11390656

tearfur's questions

Martin Hope
tearfur
Asked: 2025-04-03 11:48:42 +0800 CST
  • 6

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