Perguntas com a marcação «reactjs»

Este é o meu componente. Estou usando a função de seta embutida para alterar a rota onClickda div, mas sei que não é uma boa maneira em termos de desempenho 1. Função de seta embutida changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={() => this.changeRoute("page1")}>1</div> <div …

11 javascript  reactjs 

Instalei o material-ui / lab para usar o componente de alerta, mas sempre que eu o importo com: import Alert from '@material-ui/lab/Alert';ele falha na compilação e gera esse erro: ./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. Tentei pesquisar no google esse problema e encontrei outra pergunta sobre …

11 javascript  node.js  reactjs  material-ui 

Eu recebi o seguinte erro ao executar meu projeto no navegador: Falha ao compilar: ./node_modules/@material-ui/lab/esm/internal/svg-icons/Close.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. Estou tentando implementar o componente de preenchimento automático (a partir do exemplo na seção "Vários valores"). Aqui está o código que estou usando: import React from …

11 reactjs  typescript  material-ui 

Eu criei um <If />componente de função simples usando o React: import React, { ReactElement } from "react"; interface Props { condition: boolean; comment?: any; } export function If(props: React.PropsWithChildren<Props>): ReactElement | null { if (props.condition) { return <>{props.children}</>; } return null; } Permite escrever um código mais limpo, como: …

11 javascript  reactjs  typescript 

TL; DR Como um componente pai pode saber quando a renderização de cada componente filho abaixo dele foi concluída e o DOM visível ao usuário com sua versão mais atualizada? Digamos que eu possua um componente component Afilho Gridcomposto por 3x3componentes netos. Cada um desses componentes netos busca dados de …

11 reactjs 

Cara, estou enfrentando um problema. Eu tenho dados bidimensionais. Os dados têm uma estrutura aninhada que contém links. const data = [ // First Div Panel [ { id: 1, url: "/services", title: "Services" }, { id: 2, title: "Products", children: [ { id: 3, url: "/themes-templates", title: "Themes & …

11 reactjs 

Estou criando um aplicativo de página única do React e notei que a restauração de rolagem não parece funcionar conforme o esperado no Chrome (e talvez em outros navegadores). No repositório do github react-router-dom, eles têm uma página que diz que os navegadores estão começando a manipular nativamente a rolagem …

11 javascript  reactjs  google-chrome  react-router 

Eu tenho um aplicativo React (não usando o Create React App) criado usando TypeScript, Jest, Webpack e Babel. Ao tentar executar o "yarn jest", recebo o seguinte erro: Eu tentei remover todos os pacotes e adicioná-los novamente. Isso não resolve isso. Eu olhei para perguntas e documentação semelhantes e ainda …

11 reactjs  jestjs  babeljs  babel-jest  ts-jest 

Quero entender qual é a maneira mais geral ou correta de lidar com erros com o React-Redux. Suponha, eu tenho o componente de inscrição de número de telefone. Esse componente gera um erro, digamos se o número de telefone de entrada é inválido Qual seria a melhor maneira de lidar …

11 reactjs  redux 

Vou projetar uma navegação de gaveta no meu projeto. Eu instalei isso por este comando: npm install @react-navigation/drawer Então importou isso para App.js import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; Este é o meu package.jsonconteúdo: "@react-native-community/masked-view": "^0.1.6", "@react-navigation/drawer": "^5.0.0", "react": "16.9.0", "react-native": "0.61.5", "react-native-gesture-handler": "^1.5.6", …

10 reactjs  react-native  navigation-drawer  react-navigation 

Estou tentando entender o useEffectgancho em profundidade. Gostaria de saber quando usar qual método e por quê? 1.useEffect with no second paraments useEffect(()=>{}) 2.useEffect with second paraments as [] useEffect(()=>{},[]) 3.useEffect with some arguments passed in the second parameter useEffect(()=>{},[arg])

10 javascript  reactjs  react-redux 

Tenho um caso em que preciso saber se o usuário está logado ou não antes que a página seja renderizada no servidor e enviada de volta para mim usando o Next.js para evitar alterações de cintilação na interface do usuário. Consegui descobrir como impedir o usuário de acessar algumas páginas …

10 javascript  reactjs  typescript  next.js 

Estou tentando imitar outros aplicativos de bate-papo para celular onde, quando você seleciona a send-messagecaixa de texto e ela abre o teclado virtual, a mensagem mais abaixo ainda está em exibição. Parece não haver uma maneira de fazer isso com o CSS de maneira surpreendente, então o JavaScript resize(única maneira …

10 javascript  android  html  css  reactjs 

Estou renderizando componentes da minha biblioteca de padrões externa (node_modules). No meu aplicativo principal, estou passando minha Linkinstância react-router-dompara o componente das minhas bibliotecas externas da seguinte forma: import { Link } from 'react-router-dom'; import { Heading } from 'my-external-library'; const articleWithLinkProps = { url: `/article/${article.slug}`, routerLink: Link, }; <Heading …

10 javascript  reactjs  react-router-dom 

Estou tentando descobrir como obter um nome de usuário que é um atributo armazenado em uma coleção de usuários, que foi mesclada com os atributos criados pelo modelo de autenticação do firebase. Posso acessar o authUser - que fornece os campos limitados que o firebase coleta na ferramenta de autenticação …

10 reactjs  firebase  google-cloud-firestore  firebase-authentication