13
votos
Aceito
Como comentar bloco de código em JSX (React)
Para comentar em jsx, deves colocar chavetas à volta dos comentários, de resto é como fizeste no teu segundo exemplo (/* Não funciona */):
{/* COMENTÁRIO JSX */}
9
votos
Como comentar bloco de código em JSX (React)
Podes ler sobre isto na documentação do React, mas basicamente há 4 tipos diferentes.
Fiz um jsFiddle de exemplo aqui: https://jsfiddle.net/mk50r5qt/
O código é:
var Span = React.createClass({
...
6
votos
Aceito
State retornando valor errado / atrasado
O setState é assíncrono
Esse é o comportamento esperado.
Chamadas ao setState são assíncronas, o React busca realizar uma atualização em lote (batch) para causar menos renderizações.
Tendo em vista ...
3
votos
Aceito
Como usar o hook do React useRef com o componente NumberFormat?
De acordo com a documentação do próprio componente, como ref é uma propriedade especial do React, você está pegando a referência do componente NumberFormat, e não do input.
Para pegar a referência do ...
3
votos
Aceito
Destruir componente React (Unmounting Component)
A maneira de desmontar um componente é com ReactDOM.unmountComponentAtNode. Esse método aceita o elemento DOM em que o componente está montado. Se não tens uma referência do elemento podes passar ...
2
votos
Aceito
Componente é renderizado novamente sempre que estado de algum input é alterado
Utilize com componente e a função memo que previne esse reenderização:
const Email = React.memo(({value, setValue}) => {
return (
<div>
<div style={{height: 20}}>{...
2
votos
Aceito
Bug ao reordenar lista de componentes React
Dois problemas que podem ser os responsáveis pelo bug.
Você está usando o índice como key. O React utiliza a key para realizar seu algoritmo de atualização do DOM da forma mais eficiente possível.
...
2
votos
Ordenar array dentro de outro array com ReactJS
Vou dar uma solução alternativa a outra resposta, pois ela usa o useEffect e não sei se você pretende usar este hook.
Basicamente você pode seguir 3 passos:
Criar uma funcão que calcula SomaAD para ...
2
votos
Aceito
Ordenar array dentro de outro array com ReactJS
Crie um novo estado chamado sumary para fazer o resumo do array do estado players e a mesma operação que é feita direto na tabela faz em algum método ou quando carregar o componente. Na sumarização ...
1
voto
Aceito
Problema ao renderizar o component que possui uma função no useEffect
O useEffect pode ser desconsiderado se você retornar false. Você pode incluir uma checagem no início do useEffect:
useEffect(() => {
if(codicao) return false
}, [])
1
voto
Aceito
Problema de "chave" Única React
Para resumir, o React pede que seja passado uma prop key para todo componente que esteja dentro de uma lista.
Segundo a própria documentação do React
As chaves ajudam o React a identificar quais ...
1
voto
Aceito
onClick em componentes criados dinamicamente React
Tens de corrigir os "bindings", ou seja garantir que o contexto de execução é o correto.
Podes fazer isso assim:
constructor(props){
super(props);
this.addBetCard = this.addBetCard.bind(this)...
1
voto
Como estruturar pastas e arquivos React Js?
Nesse caso acredito que você deveria estudar design patterns, já que entender isso é exatamente o que sua dúvida busca.
Recomendo você dá uma olhada no modelo Fractal - Uma estrutura de aplicativos ...
1
voto
Aceito
Como estruturar pastas e arquivos React Js?
Particularmente eu gosto de utilizar a estrutura abaixo.
Separo components (componentes realmente reutilizáveis em qualquer ponto da aplicação), pages (as páginas), services (qualquer acesso externo), ...
1
voto
Como estruturar pastas e arquivos React Js?
O React Js é a base de componentes, certo?
Sim, segundo o próprio site: Baseado em componentes - Crie componentes encapsulados que gerenciam seu próprio estado e então, combine-os para criar UIs ...
1
voto
Como utilizar o ReactDOM para criar buttons através de condições
Podes tratar esses botões como uma array e usar if para acrescentar botões a essa array. Depois para inserires esses botões dentro do componente basta {botões}.
Nota que a tua array, assim como está "...
1
voto
ReactJS - setState não funciona com o primeiro Valor no onClick
Isso acontece porque os updates dos valores do estado do componente não acontecem imediatamente após o setState ser executado - o valor só muda na ocasião do próximo render. Você pode verificar isso ...
1
voto
Aceito
Componente em ReactJs re-renderizando componentes filhos sem necessidade, como contornar isso?
Tem sim, com o React.memo (ou em classes com PureComponent que compara o state e props superficialmente, tomando os devidos cuidados com objetos complexos, ou seja, esse recurso são para componentes ...
1
voto
Aceito
Como seria o mesmo código em ReactJs utilizando Hook para resgatar o inicio da criação do componente?
Para ter o mesmo efeito utilize o useEffect com um array sem nenhum item, como exemplo abaixo:
function Example() {
const [count, setCount] = React.useState(0);
const handleIncrement = () =>...
1
voto
Aceito
A propriedade 'data' não existe no tipo 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'. ts(2322)
O state deve ser inicializado dentro do construtor da classe:
import React, {Component} from 'react';
import Graph from './components/Graph';
interface Props{}
export default class App ...
1
voto
Aceito
Redirecionamento após post em api com axios em ReactJS
Se você estiver usando react-router-dom você pode usar this.props.history.push('/your-path'). /your-path é o caminho que você definiu nas suas rotas que renderiza o componente de dashboard.
1
voto
Aceito
Como criar um componente React de select que no evento de bind "change" pegue o valor certo que foi selecionado?
Estás quase lá, o problema é que estás a sobre escrever o array quando devias setar o value. Na prática o código que tens cria isto:
this.setState({
typeOfSearch: 'debuts'
});
e isso não é o que ...
1
voto
Aceito
Adicionando componente dinamicamente no React
Para renderizar um componente react, intencionalmente não se pode usar APIs imperativas como element.append.
O jeito é mudar seu estado para refletir o que você quer renderizar usando .setState({...})...
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
react-dom × 33react × 32
javascript × 20
react-hooks × 12
react-router × 6
jsx × 4
typescript × 2
html × 1
css × 1
array × 1
node.js × 1
funções × 1
api × 1
lista × 1
aplicação-web × 1
react-native × 1
asp.net-web-api × 1
login × 1
herança × 1
axios × 1
onclick × 1
componentes × 1
number-format × 1
styled-components × 1
comentários × 1