Perguntas com a marcação «reactjs»

Eu tenho um problema em que a re-renderização do estado causa problemas de interface do usuário e foi sugerido apenas atualizar um valor específico dentro do meu redutor para reduzir a quantidade de re-renderização em uma página. este é um exemplo do meu estado { name: "some name", subtitle: "some …

106 javascript  reactjs  redux 

Esta é minha situação: on this.handleFormSubmit () Estou executando this.setState () dentro de this.handleFormSubmit (), estou chamando this.findRoutes (); - que depende da conclusão bem-sucedida de this.setState () this.setState (); não é concluído antes que this.findRoutes seja chamado ... Como espero que this.setState () dentro de this.handleFormSubmit () termine antes …

106 javascript  reactjs  state 

Inicializei o i18nobjeto de tradução uma vez em um componente (primeiro componente que carrega no aplicativo). Esse mesmo objeto é necessário em todos os outros componentes. Não quero reinicializá-lo em todos os componentes. Qual é o caminho? Torná-lo disponível para o escopo da janela não ajuda, pois preciso usá-lo no …

106 reactjs  javascript-globalize 

O que o npm run ejectcomando faz? Eu entendo o que outros comandos fazem, como iniciar, construir, testar. Mas nenhuma ideia sobre ejetar.

106 reactjs  webpack  create-react-app  react-scripts 

De acordo com a documentação: componentDidUpdate()é chamado imediatamente após a atualização ocorrer. Este método não é chamado para a renderização inicial. Podemos usar o novo useEffect()gancho para simular componentDidUpdate(), mas parece que useEffect()está sendo executado após cada renderização, mesmo na primeira vez. Como faço para que ele não execute na …

106 javascript  reactjs  react-hooks 

Tenho um redutor para clientes, outro para AppToolbar e alguns outros ... Agora, digamos que eu criei uma ação fetch para excluir o cliente e, se ela falhar, eu tenho um código no redutor de clientes que deve fazer algumas coisas, mas também quero exibir algum erro global no AppToolbar. …

105 javascript  reactjs  redux 

Estou processando uma lista de postagens. Para cada postagem, gostaria de renderizar uma tag âncora com o id do post como parte da string href. render: function(){ return ( <ul> { this.props.posts.map(function(post){ return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li> }) } </ul> ); Como faço para que cada postagem tenha href's de /posts/1, …

105 javascript  reactjs 

Gostaria de definir o título do documento (na barra de título do navegador) para meu aplicativo React. Eu tentei usar o react-document-title (parece desatualizado) e configurar document.titleno constructore componentDidMount()- nenhuma dessas soluções funciona.

105 javascript  reactjs  dom 

Há alguma maneira de evitar que /#/apareça na barra de endereços do navegador ao usar o react-router? Isso é com ReactJS. ou seja, clicar em links para ir para uma nova rota mostralocalhost:3000/#/ ou localhost:3000/#/about. Dependendo da rota.

103 reactjs  react-router 

Estou executando o lint com meu aplicativo React e recebo este erro: error JSX props should not use arrow functions react/jsx-no-bind E é aqui que estou executando a função de seta (dentro onClick): {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

Digamos que eu tenha um componente de visualização com renderização condicional: render(){ if (this.state.employed) { return ( <div> <MyInput ref="job-title" name="job-title" /> </div> ); } else { return ( <div> <MyInput ref="unemployment-reason" name="unemployment-reason" /> <MyInput ref="unemployment-duration" name="unemployment-duration" /> </div> ); } } MyInput é parecido com isto: class MyInput extends …

103 javascript  reactjs 

Qual é a diferença entre carregadores e plug-ins no webpack? A documentação para plug-ins diz apenas: Use plug-ins para adicionar funcionalidades normalmente relacionadas a pacotes no webpack. Eu sei que o babel usa um carregador para as transformações jsx / es2015, mas parece que outras tarefas comuns (copy-webpack-plugin, por exemplo) …

103 javascript  reactjs  webpack 

Sem usar a classe, como faço para usar PropTypes no componente sem estado funcional do react? export const Header = (props) => ( <div>hi</div> )

103 javascript  reactjs  react-props  react-proptypes 

Gostaria de perguntar por que meu estado não está mudando quando faço um evento onclick. Eu pesquisei há um tempo que preciso vincular a função onclick no construtor, mas ainda assim o estado não está atualizando. Este é meu código: import React from 'react'; import Grid from 'react-bootstrap/lib/Grid'; import Row …

103 javascript  reactjs  ecmascript-6 

Sou novo no ReactJS e desejo importar imagens em um componente. Essas imagens estão dentro da pasta pública e não sei como acessar a pasta do componente react. Alguma ideia ? EDITAR Quero importar uma imagem dentro de Bottom.js ou Header.js A pasta de estrutura é: Eu não uso webpack. …

103 javascript  reactjs