Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Erro no projeto com next.js e styledcomponents persistente a todas as minhas abordagens

por Arthur Fabris peluque
| 94.4k xp | 27 posts

Contexto

Eu como já descrito estou desenvolvendo um projeto, com next.js e styledcomponents, e nele tenho um conponent footer do qual a opacidade do ícone muda dependendo da rota atual, assim demostrando que o link esta desativando.

Erro

Este erro aparece quando o código é executado, por mais que o não mude nada para o usuário diretamente, preciso extingui-lo da minha aplicação. 

Function components cannot be given refs.
Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Codigo

Eu estou estilizado diretamente o componente Image vindo do next.js, de forma dinâmica, basicamente:

const ImageStyled = styled(Image)`
opacity: ${props => props.dissable == 'true' ? '0.4' : '1'}; `

Depois isso é passado para um outro component onde essa onde é ultilizado de icone:

const IconLink = { href, imgSrc, imgAlt, dissable= "false" }) => {
    return (
        // eslint-disable-next-line @next/next/link-passhref
        <Link href={href}>
            <ImageStyled src={imgSrc} alt={imgAlt} dissable={dissable} />
        </Link>
    )
}

Depois ele é passado para um component principal que renderiza de forma condicional e passa ou não a propriedade que desabilita o link.

export const Footer = ({}) => {
    const router = useRouter()
    return (
        <FooterContainer>
            {
                router.pathname == '/' ?
                    <IconLink
                        href={'/'}
                        imgSrc={homeIcon}
                        alt='link desabilitado para a pagina home com um icone de uma casa com fundo trasparente e contorno de cor cinza'
                        dissable="true" />
                    :
                    <IconLink
                        href={'/'}
                        imgSrc={homeIcon}
                        alt='link para a pagina home com um icone de uma casa com fundo trasparente e contorno de cor preta' />
            }
            {
                router.pathname == '/sobre' ?
                    <IconLink
                        href={'/'}
                        imgSrc={aboutIcon}
                        alt='link desabilitado para a pagina sobre com um icone com um ramo e tres folhas com fundo trasparente e contorno de cor cinza'
                        dissable="true" />
                    :
                    <IconLink
                        href={'/'}
                        imgSrc={aboutIcon}
                        alt='link para a pagina sobre com um icone com um ramo e tres folhas com fundo trasparente e contorno de cor preta' />
            }
        </FooterContainer>
    )
}

Eu omiti os inputs para ir mais direto ao ponto.

Duvida

A minha duvida principalmente é na questão de onde vem esse erro e como eu resolvo ele.

E também se essa e a melhor forma de chegar neste resultado como eu estou aprendendo agora tanto o next.js quanto o styledcomponents qualquer feedback relevante eu estou aceitando.

1 resposta
solução!
por Lorena Garcia
| 8321.6k xp | 12181 posts
Alura Scuba Team Suporte Educacional

Oi Arthur, tudo bem?

Desculpe a demora em retornar.

Baseado no que você mandou, irei tentar te ajudar.

O erro que você está enfrentando ocorre porque você está tentando atribuir uma referência (ref) a um componente de função. Componentes de função no React não podem receber diretamente uma referência. Para resolver esse problema, você pode utilizar o React.forwardRef().

Aqui está um exemplo de como você pode modificar seu código para corrigir o erro:

const ImageStyled = styled(Image)`
  opacity: ${props => props.dissable === 'true' ? '0.4' : '1'};
`;

const IconLink = React.forwardRef(({ href, imgSrc, imgAlt, dissable = "false" }, ref) => {
  return (
    <Link href={href}>
      <ImageStyled ref={ref} src={imgSrc} alt={imgAlt} dissable={dissable} />
    </Link>
  );
});

export const Footer = () => {
  const router = useRouter();

  return (
    <FooterContainer>
      {router.pathname === '/' ? (
        <IconLink
          ref={React.createRef()}
          href="/"
          imgSrc={homeIcon}
          alt="link desabilitado para a página inicial com um ícone de uma casa com fundo transparente e contorno de cor cinza"
          dissable="true"
        />
      ) : (
        <IconLink
          ref={React.createRef()}
          href="/"
          imgSrc={homeIcon}
          alt="link para a página inicial com um ícone de uma casa com fundo transparente e contorno de cor preta"
        />
      )}

      {router.pathname === '/sobre' ? (
        <IconLink
          ref={React.createRef()}
          href="/"
          imgSrc={aboutIcon}
          alt="link desabilitado para a página sobre com um ícone com um ramo e três folhas com fundo transparente e contorno de cor cinza"
          dissable="true"
        />
      ) : (
        <IconLink
          ref={React.createRef()}
          href="/"
          imgSrc={aboutIcon}
          alt="link para a página sobre com um ícone com um ramo e três folhas com fundo transparente e contorno de cor preta"
        />
      )}
    </FooterContainer>
  );
};

Nesse exemplo, utilizei React.forwardRef() para criar um componente de função IconLink que aceita uma referência (ref). Também utilizei React.createRef() para criar uma referência para cada instância de IconLink dentro do componente Footer.

Em relação à sua pergunta sobre a melhor forma de alcançar esse resultado, o uso do Next.js e do styled-components é uma abordagem válida para desenvolver um projeto. O Next.js é um framework popular para criar aplicativos React renderizados no servidor, e o styled-components é uma biblioteca de estilização para React que permite escrever estilos CSS diretamente nos componentes.

No entanto, a melhor abordagem pode variar dependendo dos requisitos específicos do seu projeto e das preferências da equipe de desenvolvimento. É sempre bom explorar diferentes opções e considerar outros frameworks ou bibliotecas se necessário. Além disso, buscar recursos de aprendizado, como documentação oficial, tutoriais e exemplos, pode ser útil para aprofundar seus conhecimentos no Next.js e styled-components.

Um abraço e bons estudos.