Perguntas com a marcação «reactjs»

Eu gostaria de saber como alternar um estado booleano de um componente de reação. Por exemplo: Eu tenho o estado booleano verificado no construtor do meu componente: constructor(props, context) { super(props, context); this.state = { check: false }; }; Estou tentando alternar o estado cada vez que minha caixa de …

89 javascript  reactjs  reactjs-flux 

Existe uma maneira de fazer o React Router abrir um link em uma nova guia? Eu tentei isso e não funcionou. <Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link> É possível modificá-lo adicionando algo semelhante onClick="foo"ao Link como o que eu tenho acima, mas haveria um erro de console. Obrigado.

89 reactjs  react-router 

Talvez eu tenha entendido mal alguma coisa, mas useCallback Hook é executado sempre que ocorre uma nova renderização. Passei entradas - como um segundo argumento para usarCallback - constantes não sempre mutáveis ​​- mas o retorno de chamada memoized ainda executa meus cálculos caros em cada renderização (tenho certeza - …

89 reactjs 

Eu normalmente posto coisas relacionadas ao código no Stack, mas esta é mais uma questão sobre quais são os pensamentos gerais da comunidade. Parece haver muitas pessoas defendendo o uso de Redux com React para gerenciar dados / estado, mas ao ler e aprender ambos, descobri algo que não parece …

88 javascript  reactjs  redux 

Eu tenho testes de unidade para o meu reducers. No entanto, quando estou depurando no navegador, quero verificar se minhas ações foram chamadas corretamente e se o estado foi modificado de acordo. Estou procurando algo como: window._redux.store ... no navegador para que eu possa digitar no console e verificar como …

88 javascript  reactjs  redux 

Tenho um redutor e, para calcular o novo estado, preciso de dados da ação e também de dados de uma parte do estado não gerenciada por esse redutor. Especificamente, no redutor que mostrarei abaixo, preciso acessar o accountDetails.stateOfResidenceIdcampo. initialState.js: export default { accountDetails: { stateOfResidenceId: '', accountType: '', accountNumber: '', …

88 javascript  reactjs  redux 

Eu tenho autenticação por token de um servidor, então quando meu aplicativo Redux é carregado inicialmente eu preciso fazer uma solicitação a este servidor para verificar se o usuário está autenticado ou não, e se sim, eu devo obter o token. Descobri que o uso de ações básicas INIT do …

88 reactjs  redux 

Usando o TypeScript com React, não precisamos mais estender React.Propspara que o compilador saiba que todos os adereços do componente react podem ter filhos: interface MyProps { } class MyComponent extends React.Component<MyProps, {}> { public render(): JSX.Element { return <div>{this.props.children}</div>; } } No entanto, não parece ser o caso para …

88 reactjs  typescript 

Aqui estão os números min + gzip 26k gzip 90k 450 + k original E o React não tem muitos recursos em sua documentação. Por que é tão grande? Tenho a sensação de que é a implementação de DOM leve. Mas eu quero ter certeza.

87 reactjs 

Tenho testado meu aplicativo React.js no Internet Explorer e descobri que algum código ES6 / 7 como o Array.prototype.includes()quebra. Estou usando criar-reagir-app e, aparentemente, eles optaram por não incluir muitos polyfills, já que nem todo mundo precisa deles, e eles diminuem os tempos de construção (veja por exemplo aqui e …

87 javascript  reactjs  ecmascript-6  create-react-app  ecmascript-7 

Durante o desenvolvimento com create-react-app, meu navegador entra no modo de depurador em avisos: Ele quebra o código-fonte de react-dev-tools: // --- Welcome to debugging with React DevTools --- // This debugger statement means that you've enabled the "break on warnings" feature. // Use the browser's Call Stack panel to …

87 reactjs  javascript-debugger 

Estou implementando um exemplo de https://github.com/moroshko/react-autosuggest O código importante é assim: import React, { Component } from 'react'; import suburbs from 'json!../suburbs.json'; function getSuggestions(input, callback) { const suggestions = suburbs .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb)) .sort((suburbObj1, suburbObj2) => suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) - suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput) ) .slice(0, 7) .map(suburbObj => suburbObj.suburb); // 'suggestions' will be an …

87 javascript  json  reactjs  webpack 

Eu tenho um reactjsaplicativo escrito usando os padrões ES6 e uso webpackpara criá-lo. O webpackcarrega os jsmódulos usando babel-loader. Para ser mais específico, uso as seguintes versões de pacotes: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 Porém, após compilá-lo, o IE 10 dá o seguinte erro 'Symbol' is undefined. …

87 reactjs  webpack  babeljs 

Eu tenho alguns adereços que tem uma string que pode conter caracteres como &. Ele também contém espaços. Desejo substituir todos os espaços por  . Existe uma maneira fácil de fazer isso? Lembre-se de que não posso apenas renderizar usando esta sintaxe: <div dangerouslySetInnerHTML={{__html: myValue}} /> porque primeiro eu teria …

87 html  reactjs 

Em javascript antigo, eu tenho o DIV <div class="movie" id="my_movie"> e o seguinte código javascript var myMovie = document.getElementById('my_movie'); myMovie.addEventListener('nv-enter', function (event) { console.log('change scope'); }); Agora que tenho um componente React, dentro deste componente, no método render, estou retornando meu div. Como posso adicionar um ouvinte de evento para …

87 reactjs