Estou tentando encontrar a maneira correta de definir alguns componentes que podem ser usados de maneira genérica: <Parent> <Child value="1"> <Child value="2"> </Parent> Existe uma lógica em andamento para renderização entre componentes pai e filho, é claro, você pode...
Eu tenho um objeto observável externo (ao componente) no qual desejo escutar alterações. Quando o objeto é atualizado, ele emite eventos de alteração e desejo renderizar novamente o componente quando qualquer alteração for detectada. Com um nível superior, React.renderisso foi possível, mas dentro...
Estou ciente de que você pode especificar estilos nas classes React, assim: var MyDiv = React.createClass({ render: function() { var style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Devo ter o objetivo de...
Estou lendo a seção Formulários dereactjsdocumentação e apenas tentei esse código para demonstrar o onChangeuso ( JSBIN ). var React= require('react'); var ControlledForm= React.createClass({ getInitialState: function() { return { value: "initial value" }; }, handleChange: function(event)...
Eu tenho um problema relativamente simples de tentar adicionar scripts em linha a um componente React. O que tenho até agora: 'use strict'; import '../../styles/pages/people.scss'; import React, { Component } from 'react'; import DocumentTitle from 'react-document-title'; import { prefix } from...
Dado um componente simples que gera seus filhos: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Pergunta: Qual deve...
Como opcionalmente incluo um elemento no JSX? Aqui está um exemplo usando um banner que deve estar no componente se ele foi passado. O que eu quero evitar é ter que duplicar as tags HTML na instrução if. render: function () { var banner; if (this.state.banner) { banner = <div...
Há algo que acho muito confuso ao trabalhar React. Existem muitos exemplos disponíveis na internet que usam .jsarquivos com react, mas muitos outros usam .jsxarquivos. Eu li sobre .jsxarquivos e meu entendimento é que eles permitem que você escreva tags html dentro do seu javascript. Mas a mesma...
Estou criando algo com React, onde preciso inserir HTML com React Variables em JSX. Existe uma maneira de ter uma variável assim: var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>'; e inseri-lo em reagir assim, e funcionou? render: function() {...
Nos documentos oficiais do React, ele menciona - Se você estiver familiarizado com os métodos do ciclo de vida da classe React, considere usar o Hook Effect como componentDidMount, componentDidUpdate e componentWillUnmount combinados. Minha pergunta é - como podemos usar o...
Estou tentando renderizar componentes dinamicamente com base em seu tipo. Por exemplo: var type = "Example"; var ComponentName = type + "Component"; return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent /> Eu tentei a solução proposta aqui...
Eu tento escrever um componente React. para tags de cabeçalho html (h1, h2, h3, etc ...), em que a prioridade do cabeçalho muda dinamicamente com base na prioridade que definimos nos adereços. Aqui o que eu tento fazer. <h{this.props.priority}>Hello</h{this.props.priority}> resultado...
Aqui está o que eu tentei e como dá errado. Isso funciona: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> Isto não: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> A propriedade description é apenas uma sequência normal...
Estou tentando converter um componente jQuery para React.js e uma das coisas com as quais estou tendo dificuldade é renderizar n número de elementos com base em um loop for. Entendo que isso não é possível ou recomendado e que, onde existe uma matriz no modelo, faz todo o sentido usar map. Tudo...
Curioso, qual é a maneira correta de abordar isso: var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1}
Eu tenho um componente funcional muito simples como segue: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; E outro componente: import * as React from "react"; export interface...
Acabei de começar a explorar o React, adicionando um componente com uma função de renderização simples: render() { return <div class="myApp"></div> } Quando executo o aplicativo, recebo o seguinte erro: Warning: Unknown DOM property class. Did you mean className? Posso resolver...
Estou tentando começar a construir um site no ReactJS. No entanto, quando tentei colocar meu JS em um arquivo separado, comecei a receber este erro: "Uncaught SyntaxError: Unexpected token <". Tentei adicionar /** @jsx React.DOM */no início do arquivo JS, mas não corrigiu nada. Abaixo estão os...
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...
Eu tenho um arquivo test_stuff.js com o qual estou executando npm test É mais ou menos assim: import { assert } from 'assert'; import { MyProvider } from '../src/index'; import { React } from 'react'; const myProvider = ( <MyProvider> </MyProvider> ); describe('Array', function()...