«reactjs» etiketlenmiş sorular

Javascript (ES6) / FaceBook tepki ile çalışıyorum ve boyut olarak değişen bir dizinin ilk 3 elemanını almaya çalışıyorum. Linq take (n) eşdeğerini yapmak istiyorum. Jsx dosyamda aşağıdakiler var: var items = list.map(i => { return ( <myview item={i} key={i.id} /> ); }); Sonra denediğim ilk 3 ürünü almak için var …

383 javascript  reactjs 

Bir React dev konuşması gördüm ( Pete Hunt: React: En iyi uygulamaları yeniden düşünmek - JSConf EU 2013 ) ve konuşmacı modelin kirli kontrolünün yavaş olabileceğini belirtti. Ancak sanal DOM'lar arasındaki farkın hesaplanması aslında sanal DOM'un çoğu durumda modelden daha büyük olması gerektiğinden daha az performans göstermiyor mu? Sanal DOM'un …

372 javascript  dom  reactjs  virtual-dom 

Dinamik olarak bir öğenin yüksekliğini ("app-content" diyelim) ayarlamanız gereken bir uygulama var. Uygulamanın "krom" yüksekliğini alır ve çıkarır ve sonra "uygulama içeriğinin" yüksekliğini bu kısıtlamalar dahilinde% 100 sığacak şekilde ayarlar. Bu vanilya JS, jQuery veya Omurga görünümleri ile süper basit, ama React bunu yapmak için doğru sürecin ne olacağını bulmak …

367 javascript  reactjs 

React Router'ın (v3) geçerli sürümünde bir sunucu yanıtını kabul edebilir browserHistory.pushve uygun yanıt sayfasına gitmek için kullanabilirim . Ancak, bu v4'te mevcut değildir ve bunu işlemek için uygun yolun ne olduğundan emin değilim. Bu örnekte, kullanıcı formu gönderdiğinde, Redux'u kullanan Components / app-product-form.js çağrı this.props.addProduct(props)yapar. Sunucu bir başarı döndürdüğünde, kullanıcı …

362 reactjs  react-router  react-router-v4 

Ben bir kontrollü girdi olduğuna inanıyorum formu ile basit bir tepki bileşeni var: 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) { return function (event) …

360 javascript  node.js  reactjs  react-state 

Redux kütüphanesinin belgelerini okuyordum ve bu örneği var: Durumu okumaya ek olarak, kap bileşenleri eylemler gönderebilir. Benzer bir şekilde, sen adlı bir işlev tanımlayabilirsiniz mapDispatchToProps()aldığı dispatch()yöntem ve sunumsal bileşene enjekte etmek istedikleri döner sahne geri çağırma. Bu aslında bir anlam ifade etmiyor. mapDispatchToPropsZaten sahip olduğunuzda neden ihtiyacınız var mapStateToProps? Ayrıca …

358 reactjs  redux  react-redux 

Yapım aşağıdaki gibi görünüyor: Component 1 - |- Component 2 - - |- Component 4 - - - |- Component 5 Component 3 Bileşen 3, Bileşen 5'in durumuna bağlı olarak bazı verileri görüntülemelidir. Sahne öğeleri değiştirilemediğinden, durumunu Bileşen 1'e kaydedip iletemiyorum, değil mi? Ve evet, redux hakkında okudum, ama kullanmak …

351 javascript  reactjs  web-deployment 

ReactJS ve JSX için yeni ve aşağıdaki kod ile küçük bir sorun yaşıyorum. classNameHer özniteliğe birden çok sınıf eklemek çalışıyorum li: <li key={index} className={activeClass, data.class, "main-class"}></li> Benim React bileşenim: var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, clicked: function(index) { this.setState({ focused: index }); }, …

348 javascript  css  reactjs  ecmascript-6 

Bileşenimin render işlevinde: 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> ); } her şey iyi işliyor, ancak <li>öğeyi tıklattığınızda aşağıdaki hatayı alıyorum: Yakalanmayan Hata: Değişmez İhlal: Nesneler bir Reaksiyon alt …

337 javascript  reactjs 

Az react-routerönce v3'ten v4'e geçtim . Ancak a Component. Üye işlevinde programlı olarak gezinmek nasıl emin değilim . yani handleClick()işlevde /path/some/wherebazı verileri işledikten sonra gitmek istiyorum . Bunu şu şekilde yapardım: import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') Ama v4'te böyle arayüzler bulamıyorum. V4'ü kullanarak nasıl gezinebilirim?

336 reactjs  ecmascript-6  react-router-v4 

Koşullu olarak göstermek ve bu gibi görünüyor ana bileşen ne geçti bağlı olarak bu düğme grubunu gizlemek istiyorum: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on data } .... var TopicNav = React.createClass({ render: function() { return ( <div className="row"> <div className="col-lg-6"> <div …

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

Uyarı: Bir bileşen, kontrol edilecek tip metinlerin kontrolsüz bir girişini değiştiriyor. Giriş elemanları kontrolsüzden kontrollü (veya tam tersi) olmamalıdır. Bileşenin ömrü boyunca kontrollü veya kontrolsüz giriş öğesi kullanma arasında karar verin. * Kodum aşağıdadır: constructor(props) { super(props); this.state = { fields: {}, errors: {} } this.onSubmit = this.onSubmit.bind(this); } .... …

331 javascript  reactjs 

Formlar bölümünü okuyorumreactjsve sadece onChangekullanımı göstermek için bu kodu denedim ( 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} onChange={this.handleChange}/> ); } }); React.render( …

326 javascript  reactjs  react-jsx 

ReactJS ile yeni başladım ve sahip olduğum bir soruna biraz takıldım. Uygulamam aslında filtreleri içeren bir liste ve düzeni değiştirmek için bir düğme. : Şu anda üç bileşeni kullanıyorum <list />, < Filters />ve <TopBar />şimdi açıkçası ben ayarlarını değiştirmek zaman, < Filters />ben de bazı yöntem tetiklemek istiyorum <list …

321 javascript  reactjs 

Aşağıdaki hatayı alıyorum Yakalanmamış TypeError: undefined öğesinin 'setState' özelliği okunamıyor kurucuda delta bağlandıktan sonra bile. class Counter extends React.Component { constructor(props) { super(props); this.state = { count : 1 }; this.delta.bind(this); } delta() { this.setState({ count : this.state.count++ }); } render() { return ( <div> <h1>{this.state.count}</h1> <button onClick={this.delta}>+</button> </div> ); …

316 javascript  reactjs