«reactjs» etiketlenmiş sorular

React 16.7-alpha'daki yeni kanca sistemi ile oynuyordum ve kullandığım durum bir nesne veya dizi olduğunda kullanımda sonsuz bir döngüde sıkışıp kalıyorumEffect. İlk önce useState'i kullanıyorum ve şunun gibi boş bir nesneyle başlatıyorum: const [obj, setObj] = useState({}); Daha sonra useEffect'te setObj'yi tekrar boş bir nesneye ayarlamak için kullanıyorum. İkinci bir …

106 reactjs  react-hooks 

Oluşturduğum bir bileşenim var: class Create extends Component { constructor(props) { super(props); } render() { var playlistDOM = this.renderPlaylists(this.props.playlists); return ( <div> {playlistDOM} </div> ) } activatePlaylist(playlistId) { debugger; } renderPlaylists(playlists) { return playlists.map(playlist => { return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div> }); } } function mapStateToProps(state) { return { playlists: state.playlists …

106 javascript  reactjs  redux 

Müşteriler için bir redüktörüm var, bir tane de AppToolbar için ve diğerleri ... Şimdi, istemciyi silmek için bir getirme eylemi oluşturduğumu ve başarısız olursa İstemciler indirgeyicisinde bazı şeyler yapması gereken bir kodum olduğunu ve ayrıca AppToolbar'da bazı genel hatalar görüntülemek istediğimi varsayalım. Ancak İstemciler ve AppToolbar redüktörleri devletin aynı bölümünü …

105 javascript  reactjs  redux 

Bir gönderi listesi oluşturuyorum. Her gönderi için href dizesinin bir parçası olarak gönderi kimliğiyle bir bağlantı etiketi oluşturmak istiyorum. render: function(){ return ( <ul> { this.props.posts.map(function(post){ return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li> }) } </ul> ); Nasıl her sonrası href 's vardır ki yapacağız /posts/1, /posts/2vs?

105 javascript  reactjs 

React uygulamamla lint çalıştırıyorum ve şu hatayı alıyorum: error JSX props should not use arrow functions react/jsx-no-bind Ok işlevini çalıştırdığım yer burası (içeride onClick): {this.state.photos.map(tile => ( <span key={tile.img}> <Checkbox defaultChecked={tile.checked} onCheck={() => this.selectPicture(tile)} style={{position: 'absolute', zIndex: 99, padding: 5, backgroundColor: 'rgba(255, 255, 255, 0.72)'}} /> <GridTile title={tile.title} subtitle={<span>by <b>{tile.author}</b></span>} …

105 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

Ben yükledim eslint-config-airbnb Tepki için yapılandırmak ESLINT öncesi gerekiyordu: Varsayılan dışa aktarmamız, ECMAScript 6+ ve React dahil tüm ESLint kurallarımızı içerir. Eslint, eslint-plugin-import, eslint-plugin-react ve eslint-plugin-jsx-a11y gerektirir. Benim .eslintrcyapılandırmasını uzanan: { "extends": "eslint-config-airbnb", "env": { "browser": true, "node": true, "mocha": true }, "rules": { "new-cap": [2, { "capIsNewExceptions": ["List", "Map", …

105 javascript  reactjs  eslint  eslint-config-airbnb 

This.setState'i birden çok kez kullandığınızda ne olacağını kontrol etmek istedim (tartışma uğruna 2 kez). Bileşenin iki kez işleneceğini düşünmüştüm ama görünüşe göre sadece bir kez işleniyor. Bir başka beklentim de, setState için ikinci çağrının birincisinin üzerinden geçeceğiydi, ama siz tahmin ettiniz - iyi çalıştı. Bir bağlantı JSfiddle var Hello = …

105 javascript  reactjs 

Typcript ile create-react-app kullanmaya başladım create-react-app my-app --scripts-version=react-scripts-ts ve varsayılan tslint.json yapılandırması console.log () işlevine izin vermez. Console.log'u (şimdilik) nasıl etkinleştirebilirim? Bunun için dokümanlar https://palantir.github.io/tslint/rules/no-console/ adresindedir . Ama bu satırı nereye koyacaklarını söylemiyorlar: "no-console": [true, "log", "error"] Bu tslint.json yapılandırma dosyası sözdizimini aradım ve buldum , bu yüzden şunu denedim: …

105 reactjs  typescript  create-react-app  tslint 

Nesneleri içeren bir dizi olan istasyon adı verilen bazı verilerim var. stations : [ {call:'station one',frequency:'000'}, {call:'station two',frequency:'001'} ] Her dizi konumu için bir ui bileşeni oluşturmak istiyorum. Şimdiye kadar yazabilirim var stationsArr = [] for (var i = 0; i < this.data.stations.length; i++) { stationsArr.push( <div className="station"> {this.data} </div> …

105 javascript  reactjs 

Sadece metin girişine yazıyorum ve onChangearadığımda setStateReact kullanıcı arayüzümü yeniden oluşturuyor. Sorun, metin girişinin her zaman odağı kaybetmesidir, bu nedenle her harf için yeniden odaklanmam gerekir: D. var EditorContainer = React.createClass({ componentDidMount: function () { $(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size: '8px'}); }, componentDidUpdate: function () { console.log("zde"); $(this.getDOMNode()).slimScroll({destroy: true}).slimScroll({height: 'auto', …

105 javascript  reactjs 

ReactJS'de programlama yaparken Axios kullanıyorum ve sunucuma bir DELETE isteği gönderiyormuş gibi yapıyorum. Bunu yapmak için başlıklara ihtiyacım var: headers: { 'Authorization': ... } ve vücut oluşur var payload = { "username": .. } Ara ağlarda arama yapıyorum ve yalnızca DELETE yönteminin bir "param" gerektirdiğini ve "veri" kabul etmediğini buldum. …

105 javascript  reactjs  http  axios  http-delete 

React Native'de bir form oluşturuyorum ve s'mi TextInputekran genişliğinin% 80'ini yapmak istiyorum . HTML ve sıradan CSS ile bu basit olacaktır: input { display: block; width: 80%; margin: auto; } React Native'in displayözelliği, yüzde genişliklerini veya otomatik kenar boşluklarını desteklememesi dışında. Peki bunun yerine ne yapmalıyım? Orada bu sorunun bazı …

105 javascript  css  reactjs  react-native 

Bazı yan etkilerim var ve bunları nasıl organize edeceğimi bilmek istiyorum: tek kullanımlık olarak veya birkaç kullanım Etkisi Performans ve mimari açısından daha iyi olan nedir?

105 reactjs  react-hooks 

Koşullu işlemeye sahip bir görünüm bileşenim olduğunu varsayalım: render(){ if (this.state.employed) { return ( <div> <MyInput ref="job-title" name="job-title" /> </div> ); } else { return ( <div> <MyInput ref="unemployment-reason" name="unemployment-reason" /> <MyInput ref="unemployment-duration" name="unemployment-duration" /> </div> ); } } Girdiğim şuna benzer: class MyInput extends React.Component { ... render(){ return …

104 javascript  reactjs 

Web paketindeki yükleyiciler ve eklentiler arasındaki fark nedir? Eklentileri için dokümantasyon sadece diyor ki: Genellikle web paketindeki paketlerle ilgili işlevsellik eklemek için eklentileri kullanın. Babel'in jsx / es2015 dönüşümleri için bir yükleyici kullandığını biliyorum, ancak diğer ortak görevler (örneğin, kopya-web paketi-eklentisi) bunun yerine eklentileri kullanıyor gibi görünüyor.

104 javascript  reactjs  webpack