Perguntas com a marcação «reactjs»

Estou trabalhando com o Javascript (ES6) / FaceBook reagindo e tentando obter os 3 primeiros elementos de uma matriz que varia em tamanho. Eu gostaria de fazer o equivalente ao Linq take (n). No meu arquivo Jsx, tenho o seguinte: var items = list.map(i => { return ( <myview item={i} …

384 javascript  reactjs 

Vi uma palestra do desenvolvedor do React em ( Pete Hunt: React: Repensando as melhores práticas - JSConf EU 2013 ) e o palestrante mencionou que a verificação suja do modelo pode ser lenta. Mas o cálculo da diferença entre DOMs virtuais na verdade é ainda menos eficiente, já que …

372 javascript  dom  reactjs  virtual-dom 

Eu tenho um aplicativo no qual preciso definir a altura de um elemento (digamos "conteúdo do aplicativo") dinamicamente. Ele pega a altura do "cromo" do aplicativo e o subtrai e define a altura do "conteúdo do aplicativo" para caber 100% dentro dessas restrições. Isso é super simples com exibições vanilla …

367 javascript  reactjs 

Na versão atual do React Router (v3), posso aceitar uma resposta do servidor e usar browserHistory.pushpara ir para a página de resposta apropriada. No entanto, isso não está disponível na v4 e não tenho certeza de qual é a maneira apropriada de lidar com isso. Neste exemplo, usando o Redux, …

361 reactjs  react-router  react-router-v4 

Eu tenho um componente de reação simples com o formulário que acredito ter uma entrada controlada: import React from 'react'; export default class MyForm extends React.Component { constructor(props) { super(props); this.state = {} } render() { return ( <form className="add-support-staff-form"> <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/> </form> ) } onFieldChange(fieldName) { …

360 javascript  node.js  reactjs  react-state 

Eu estava lendo a documentação da biblioteca Redux e ela tem este exemplo: Além de ler o estado, os componentes do contêiner podem despachar ações. De maneira semelhante, você pode definir uma função chamada mapDispatchToProps()que recebe o dispatch()método e retorna adereços de retorno de chamada que deseja injetar no componente …

358 reactjs  redux  react-redux 

Minha estrutura é a seguinte: Component 1 - |- Component 2 - - |- Component 4 - - - |- Component 5 Component 3 O componente 3 deve exibir alguns dados, dependendo do estado do componente 5. Como os objetos são imutáveis, não posso simplesmente salvar seu estado no componente …

350 javascript  reactjs  web-deployment 

Eu sou novo no ReactJS e JSX e estou tendo um pequeno problema com o código abaixo. Estou tentando adicionar várias classes ao classNameatributo em cada um li: <li key={index} className={activeClass, data.class, "main-class"}></li> Meu componente React é: var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, …

346 javascript  css  reactjs  ecmascript-6 

Na função de renderização do meu componente, tenho: render() { const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => { return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>); }); return ( <div> ... <ul> {items} </ul> ... </div> ); } tudo fica bem, no entanto, ao clicar no <li>elemento, recebo o seguinte erro: …

337 javascript  reactjs 

Acabei de substituir react-routerda v3 para a v4. Mas não sei como navegar programaticamente na função de membro de a Component. ou seja, na handleClick()função que deseja navegar /path/some/whereapós o processamento de alguns dados. Eu costumava fazer isso: import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') Mas não consigo encontrar essas …

336 reactjs  ecmascript-6  react-router-v4 

Quero mostrar e ocultar condicionalmente esse grupo de botões, dependendo do que é passado do componente pai, que se parece com isso: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on data } .... var TopicNav = React.createClass({ render: function() { return ( <div …

334 javascript  css  twitter-bootstrap-3  reactjs  class-attributes 

Aviso: Um componente está alterando uma entrada não controlada do tipo de texto a ser controlado. Os elementos de entrada não devem mudar de não controlado para controlado (ou vice-versa). Decida entre usar um elemento de entrada controlado ou não controlado durante a vida útil do componente. * A seguir …

331 javascript  reactjs 

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) { console.log(this.state.value); this.setState({value: event.target.value}); console.log(this.state.value); }, render: function() { return ( <input type="text" value={this.state.value} …

326 javascript  reactjs  react-jsx 

Acabei de começar o ReactJS e estou um pouco preso em um problema que tenho. Minha aplicação é essencialmente uma lista com filtros e um botão para alterar o layout. No momento eu estou usando três componentes: <list />, < Filters />e <TopBar />, agora, obviamente, quando eu alterar as …

321 javascript  reactjs 

Eu estou recebendo o seguinte erro TypeError não capturado: Não é possível ler a propriedade 'setState' de undefined mesmo após a ligação delta no construtor. class Counter extends React.Component { constructor(props) { super(props); this.state = { count : 1 }; this.delta.bind(this); } delta() { this.setState({ count : this.state.count++ }); } …

316 javascript  reactjs