Pertanyaan yang diberi tag «reactjs»

Saya memiliki banyak komponen yang semuanya perlu melakukan hal yang sama. (Fungsi sederhana yang memetakan komponen anak mereka dan melakukan sesuatu untuk masing-masing komponen). Saat ini saya sedang mendefinisikan metode ini di setiap komponen. Tapi saya hanya ingin mendefinisikannya sekali. Saya bisa mendefinisikannya di komponen tingkat atas dan kemudian menyebarkannya …

90 reactjs 

Saya mencoba memisahkan komponen presentasi dari komponen wadah. Saya memiliki a SitesTabledan a SitesTableContainer. Penampung bertanggung jawab untuk memicu tindakan redux untuk mengambil situs yang sesuai berdasarkan pengguna saat ini. Masalahnya adalah pengguna saat ini diambil secara asinkron, setelah komponen penampung dirender pada awalnya. Ini berarti bahwa komponen penampung tidak …

90 reactjs  redux  react-redux 

Saya mencoba untuk mengubah <canvas>animasi keren yang saya temukan di sini menjadi komponen React yang dapat digunakan kembali. Sepertinya komponen ini memerlukan satu komponen induk untuk kanvas, dan banyak komponen anak untuk function Ball(). Untuk alasan kinerja, mungkin akan lebih baik untuk menjadikannya Ballskomponen tanpa negara karena jumlahnya akan banyak. …

90 reactjs 

Saya memiliki beberapa props yang memiliki string yang dapat berisi karakter seperti &. Ini juga berisi spasi. Saya ingin mengganti semua spasi dengan  . Apakah ada cara mudah untuk melakukan ini? Ingatlah bahwa saya tidak bisa begitu saja merender menggunakan sintaks ini: <div dangerouslySetInnerHTML={{__html: myValue}} /> karena saya pertama-tama harus …

90 html  reactjs 

Saya ingin menutup menu dropdown ketika klik terjadi di luar komponen dropdown. Bagaimana aku melakukan itu?

89 reactjs 

Katakanlah saya memiliki toggle sederhana: Saat saya mengklik tombol, komponen Color berubah antara merah dan biru Saya mungkin mencapai hasil ini dengan melakukan sesuatu seperti ini. index.js Button: onClick={()=>{dispatch(changeColor())}} Color: this.props.color ? blue : red container.js connect(mapStateToProps)(indexPage) action_creator.js function changeColor(){ return {type: 'CHANGE_COLOR'} } reducer.js switch(){ case 'CHANGE_COLOR': return {color: …

89 javascript  reactjs  redux 

Saya menulis ulang aplikasi saya untuk menggunakan Flux dan saya memiliki masalah dengan mengambil data dari Toko. Saya memiliki banyak komponen, dan mereka banyak bersarang. Beberapa di antaranya besar ( Article), beberapa kecil dan sederhana ( UserAvatar, UserLink). Saya telah berjuang dengan di mana dalam hierarki komponen saya harus membaca …

89 javascript  reactjs  reactjs-flux 

Saya mencari cara untuk mengimplementasikan pengguliran tak terbatas dengan React. Saya telah menemukan react-infinite-scroll dan menganggapnya tidak efisien karena hanya menambahkan node ke DOM dan tidak menghapusnya. Apakah ada solusi yang terbukti dengan React yang akan menambah, menghapus, dan mempertahankan jumlah node yang konstan di DOM. Inilah masalah jsfiddle . …

89 javascript  html  infinite-scroll  reactjs 

Saya menerapkan contoh dari https://github.com/moroshko/react-autosuggest Kode penting seperti ini: import React, { Component } from 'react'; import suburbs from 'json!../suburbs.json'; function getSuggestions(input, callback) { const suggestions = suburbs .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb)) .sort((suburbObj1, suburbObj2) => suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) - suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput) ) .slice(0, 7) .map(suburbObj => suburbObj.suburb); // 'suggestions' will be an array of …

89 javascript  json  reactjs  webpack 

Dalam javascript lama biasa saya memiliki DIV <div class="movie" id="my_movie"> dan kode javascript berikut var myMovie = document.getElementById('my_movie'); myMovie.addEventListener('nv-enter', function (event) { console.log('change scope'); }); Sekarang saya memiliki Komponen React, di dalam komponen ini, dalam metode render, saya mengembalikan div saya. Bagaimana cara menambahkan event listener untuk acara khusus saya? …

89 reactjs 

Ini angkanya min + gzip 26k gzip 90k asli 450 + k Dan React tidak memiliki banyak fitur dalam dokumentasinya. Mengapa begitu besar? Saya merasa ini adalah penerapan DOM ringan. Tapi saya ingin memastikan.

88 reactjs 

Saya telah menguji aplikasi React.js saya di internet explorer, dan menemukan bahwa beberapa kode ES6 / 7 seperti Array.prototype.includes()memecahkannya. Saya menggunakan create-react-app , dan tampaknya mereka telah memilih untuk tidak menyertakan banyak polyfill karena tidak semua orang membutuhkannya, dan mereka memperlambat waktu build (lihat misalnya di sini dan di sini …

88 javascript  reactjs  ecmascript-6  create-react-app  ecmascript-7 

Saya memiliki reactjsaplikasi yang ditulis menggunakan standar ES6, dan saya gunakan webpackuntuk membangunnya. The webpackbeban yang jsmodul menggunakan babel-loader. Untuk lebih spesifik, saya menggunakan versi paket berikut: ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 Namun, setelah membangunnya, IE 10 memberikan kesalahan berikut 'Symbol' is undefined. Bukankah babelseharusnya yang mendefinisikan …

87 reactjs  webpack  babeljs 

Saat mengembangkan dengan create-react-app, browser saya memasuki mode debugger pada peringatan: Itu rusak pada kode sumber react-dev-tools: // --- Welcome to debugging with React DevTools --- // This debugger statement means that you've enabled the "break on warnings" feature. // Use the browser's Call Stack panel to step out of …

87 reactjs  javascript-debugger 

Masalah Saya mengatur react refmenggunakan definisi fungsi inline render = () => { return ( <div className="drawer" ref={drawer => this.drawerRef = drawer}> maka componentDidMountreferensi DOM tidak disetel componentDidMount = () => { // this.drawerRef is not defined Pemahaman saya adalah refcallback harus dijalankan selama mount, namun console.logpernyataan menambahkan mengungkapkan componentDidMountdipanggil …

87 javascript  reactjs