Pertanyaan yang diberi tag «reactjs»

Saya bekerja dengan Javascript (ES6) / FaceBook bereaksi dan mencoba untuk mendapatkan 3 elemen pertama dari array yang ukurannya bervariasi. Saya ingin melakukan yang setara dengan Linq take (n). Dalam file Jsx saya, saya memiliki yang berikut ini: var items = list.map(i => { return ( <myview item={i} key={i.id} /> …

387 javascript  reactjs 

Saya melihat React dev talk at ( Pete Hunt: React: Rethinking best practices - JSConf EU 2013 ) dan pembicara menyebutkan bahwa pengecekan model yang kotor bisa lambat. Tapi bukankah menghitung perbedaan antara DOM virtual sebenarnya bahkan lebih sedikit performanya karena DOM virtual, dalam banyak kasus, harus lebih besar dari …

372 javascript  dom  reactjs  virtual-dom 

Saya memiliki aplikasi tempat saya perlu mengatur ketinggian elemen (katakanlah "konten-aplikasi") secara dinamis. Dibutuhkan ketinggian "chrome" dari aplikasi dan kurangi itu dan kemudian atur ketinggian "app-content" agar sesuai dengan 100% dalam batasan itu. Ini super sederhana dengan tampilan vanilla JS, jQuery, atau Backbone, tapi saya berjuang untuk mencari tahu proses …

367 javascript  reactjs 

Dalam versi React Router (v3) saat ini, saya dapat menerima respons server dan gunakan browserHistory.pushuntuk membuka halaman respons yang sesuai. Namun, ini tidak tersedia di v4, dan saya tidak yakin apa cara yang tepat untuk menangani ini. Dalam contoh ini, menggunakan Redux, komponen / app-product-form.js panggilan this.props.addProduct(props)saat pengguna mengirimkan formulir. …

361 reactjs  react-router  react-router-v4 

Saya memiliki komponen reaksi sederhana dengan bentuk yang saya yakini memiliki satu input terkontrol: 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 …

360 javascript  node.js  reactjs  react-state 

Saya sedang membaca dokumentasi untuk perpustakaan Redux dan memiliki contoh ini: Selain membaca keadaan, komponen kontainer dapat mengirim tindakan. Dengan cara yang sama, Anda bisa mendefinisikan fungsi yang dipanggil mapDispatchToProps()yang menerima dispatch()metode dan mengembalikan alat-alat panggilan balik yang ingin Anda masukkan ke dalam komponen presentasi. Ini sebenarnya tidak masuk akal. …

358 reactjs  redux  react-redux 

Struktur saya terlihat sebagai berikut: Component 1 - |- Component 2 - - |- Component 4 - - - |- Component 5 Component 3 Komponen 3 harus menampilkan beberapa data tergantung pada keadaan Komponen 5. Karena alat peraga tidak dapat diubah, saya tidak bisa hanya menyimpannya dalam Komponen 1 dan …

350 javascript  reactjs  web-deployment 

Saya baru mengenal ReactJS dan JSX dan saya mengalami sedikit masalah dengan kode di bawah ini. Saya mencoba menambahkan beberapa kelas ke classNameatribut pada masing-masing li: <li key={index} className={activeClass, data.class, "main-class"}></li> Komponen React saya adalah: var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, clicked: function(index) …

346 javascript  css  reactjs  ecmascript-6 

Dalam fungsi render komponen saya, saya memiliki: 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> ); } semuanya membuat baik-baik saja, namun ketika mengklik <li>elemen saya menerima kesalahan berikut: Uncaught Error: …

337 javascript  reactjs 

Saya baru saja mengganti react-routerdari v3 ke v4. Tetapi saya tidak yakin bagaimana cara menavigasi secara terprogram dalam fungsi anggota a Component. yaitu dalam handleClick()fungsi saya ingin menavigasi ke /path/some/wheresetelah memproses beberapa data. Saya biasa melakukannya dengan: import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') Tapi saya tidak dapat menemukan antarmuka …

336 reactjs  ecmascript-6  react-router-v4 

Saya ingin memperlihatkan dan menyembunyikan grup tombol ini secara kondisional tergantung pada apa yang diteruskan dari komponen induk yang terlihat seperti ini: <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 

Peringatan: Komponen mengubah input teks tipe yang tidak terkontrol untuk dikontrol. Elemen input tidak boleh beralih dari tidak terkontrol ke terkontrol (atau sebaliknya). Putuskan antara menggunakan elemen input yang dikontrol atau tidak dikontrol selama masa pakai komponen. * Berikut ini adalah kode saya: constructor(props) { super(props); this.state = { fields: …

331 javascript  reactjs 

Saya membaca bagian FormulirReaksidokumentasi dan baru saja mencoba kode ini untuk menunjukkan onChangepenggunaan ( 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}/> ); …

326 javascript  reactjs  react-jsx 

Saya baru saja mulai dengan ReactJS dan saya sedikit terjebak pada masalah yang saya miliki. Aplikasi saya pada dasarnya adalah daftar dengan filter dan tombol untuk mengubah tata letak. Saat ini saya menggunakan tiga komponen: <list />, < Filters />dan <TopBar />, sekarang jelas ketika saya mengubah pengaturan di < …

321 javascript  reactjs 

Saya telah membuat proyek React kosong, menggunakan perintah: npx create-react-app pada npm v7.0.7 dan Node v15.0.1 Dipasang: React v17.0.1, node-sass v5.0.0, Kemudian saya mencoba mengimpor file .scss kosong ke komponen App: App.js import './App.scss' function App() { return ( <div className="App"> App </div> ); } export default App; Lempar Kesalahan: …

320 reactjs  webpack  create-react-app  node-sass  sass-loader