Pertanyaan yang diberi tag «reactjs»

Jadi, inilah alur kerja saya saat ini untuk mengimpor gambar dan ikon di webpack melalui ES6: import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} /> Ini menjadi cepat berantakan. Inilah yang saya inginkan: import * from './images' <img src={doggy} /> …

104 reactjs  webpack  ecmascript-6 

Adakah cara untuk mencegah agar tidak /#/muncul di bilah alamat browser saat menggunakan react-router? Itu dengan ReactJS. yaitu Mengklik link untuk pergi ke acara rute baru localhost:3000/#/atau localhost:3000/#/about. Tergantung rutenya.

103 reactjs  react-router 

Saya menjalankan lint dengan aplikasi React saya, dan saya menerima kesalahan ini: error JSX props should not use arrow functions react/jsx-no-bind Dan di sinilah saya menjalankan fungsi panah (di dalam 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, …

103 javascript  reactjs  ecmascript-6  jsx  arrow-functions 

Katakanlah saya memiliki komponen tampilan yang memiliki render bersyarat: 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> ); } } MyInput terlihat seperti ini: class MyInput extends React.Component { ... …

103 javascript  reactjs 

Tanpa menggunakan class, bagaimana cara menggunakan PropTypes dalam komponen stateless fungsional react? export const Header = (props) => ( <div>hi</div> )

103 javascript  reactjs  react-props  react-proptypes 

Saya mengalami sedikit masalah saat bermigrasi dari React-Router v3 ke v4. di v3 saya bisa melakukan ini di mana saja: import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); Bagaimana cara mencapai ini di v4. Saya tahu bahwa saya dapat menggunakan, hoc withRouter, konteks reaksi, atau alat peraga router acara ketika Anda …

103 reactjs  react-router 

Apa saja komponen terkontrol dan komponen tak terkontrol di ReactJS? Bagaimana mereka berbeda satu sama lain?

103 reactjs  react-component 

Setiap kali saya mencoba menggunakan ikon Font Awesome di React's render(), itu tidak ditampilkan di halaman web yang dihasilkan meskipun berfungsi dalam HTML normal. render: function() { return <div><i class="fa fa-spinner fa-spin">no spinner but why</i></div>; } Berikut adalah contoh langsungnya: http://jsfiddle.net/pLWS3/ Dimana salahnya?

103 reactjs  font-awesome 

Sesuatu yang sesederhana ini seharusnya dapat dengan mudah dilakukan, namun saya berusaha menjelaskan betapa rumitnya hal itu. Yang ingin saya lakukan adalah menganimasikan proses pemasangan & pelepasan komponen React, itu saja. Inilah yang telah saya coba sejauh ini dan mengapa setiap solusi tidak berfungsi: ReactCSSTransitionGroup - Saya tidak menggunakan kelas …

103 animation  reactjs  css-animations  gsap  react-motion 

Apa cara yang benar untuk memperbarui status, apakah objek bersarang, di React with Hooks? export Example = () => { const [exampleState, setExampleState] = useState( {masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b" fieldTwoTwo: "c" } } }) Bagaimana cara yang digunakan setExampleStateuntuk memperbarui exampleStateke a(menambahkan bidang)? const a = …

103 javascript  reactjs  react-hooks 

Judulnya menjelaskan semuanya. Saya mengerti mengapa componentDidMountcocok untuk apa pun yang membutuhkan akses DOM, tetapi permintaan AJAX tidak selalu atau biasanya membutuhkan ini. Apa yang memberi?

102 reactjs 

Saya tidak mengerti apa tujuan menggunakan IndexRoute dan IndexLink . Tampaknya dalam kasus apa pun kode di bawah ini akan memilih komponen Rumah terlebih dahulu kecuali jalur Tentang diaktifkan. <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/> </Route> vs. <Route path="/" component={App}> <Route path="home" component={Home}/> <Route path="about" component={About}/> </Route> Apa …

102 javascript  reactjs  react-router  url-routing 

Saya telah menginstal eslint-config-airbnb yang seharusnya mengonfigurasi ESLINT untuk React: Ekspor default kami berisi semua aturan ESLint kami, termasuk ECMAScript 6+ dan React. Ini membutuhkan eslint, eslint-plugin-import, eslint-plugin-react, dan eslint-plugin-jsx-a11y. Saya .eslintrcmemperluas konfigurasinya: { "extends": "eslint-config-airbnb", "env": { "browser": true, "node": true, "mocha": true }, "rules": { "new-cap": [2, { …

102 javascript  reactjs  eslint  eslint-config-airbnb 

Ini formulir saya dan metode onClick. Saya ingin menjalankan metode ini ketika tombol Enter pada keyboard ditekan. Bagaimana caranya? NB: Tidak ada jquery yang dihargai. comment: function (e) { e.preventDefault(); this.props.comment({comment: this.refs.text.getDOMNode().value, userPostId:this.refs.userPostId.getDOMNode().value}) }, <form className="commentForm"> <textarea rows="2" cols="110" placeholder="****Comment Here****" ref="text" /><br /> <input type="text" placeholder="userPostId" ref="userPostId" /> <br …

102 reactjs  reactjs-flux 

Saya memiliki satu komponen yang akan menampilkan Array of String. Kodenya terlihat seperti ini. React.createClass({ render() { <div> this.props.data.map(t => <span>t</span>) </div> } }) Ini bekerja dengan baik. yaitu jika props.data = ['tom', 'jason', 'chris'] Hasil yang diberikan di halaman ini adalah tomjasonchris Lalu, saya ingin menggabungkan semua nama dengan …

102 reactjs