Pertanyaan yang diberi tag «jsx»

Diberikan komponen sederhana yang menjadikan anak-anaknya: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Pertanyaan: Seperti apa seharusnya proptype anak-anak? Ketika saya menetapkannya sebagai objek, itu gagal ketika saya menggunakan komponen dengan beberapa …

265 reactjs  jsx  react-proptypes 

Ada sesuatu yang saya pikir sangat membingungkan ketika bekerja React. Ada banyak contoh yang tersedia di internet yang menggunakan .jsfile dengan reaksi tetapi banyak lainnya menggunakan .jsxfile. Saya telah membaca tentang .jsxfile dan pengertian saya adalah mereka membiarkan Anda menulis tag html di dalam file Anda javascript. Tetapi hal yang …

211 reactjs  jsx 

Dalam dokumen resmi Bereaksi itu menyebutkan - Jika Anda terbiasa dengan metode siklus hidup kelas React, Anda dapat menganggap useEffect Hook sebagai componentDidMount, componentDidUpdate, dan componentWillUnmount yang digabungkan. Pertanyaan saya adalah - bagaimana kita bisa menggunakan componentWillMount()metode siklus hidup dalam sebuah kail?

176 javascript  reactjs  jsx  react-hooks 

Saya mencoba menulis komponen Bereaksi. untuk tag heading html (h1, h2, h3, dll ...), di mana prioritas heading berubah secara dinamis berdasarkan prioritas yang telah kami tentukan dalam alat peraga. Inilah yang saya coba lakukan. <h{this.props.priority}>Hello</h{this.props.priority}> output yang diharapkan: <h1>Hello</h1> Ini tidak bekerja. Apakah ada metode yang memungkinkan untuk melakukan …

163 reactjs  jsx 

Inilah yang saya coba dan bagaimana kesalahannya. Ini bekerja: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> Ini tidak: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> Properti deskripsi hanyalah string normal konten HTML. Namun itu diterjemahkan sebagai string, bukan sebagai HTML karena alasan tertentu. Ada saran?

162 javascript  html  reactjs  jsx 

Penasaran apa cara yang tepat untuk mendekati ini adalah: var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1} onChange={this.handleChange} /> <input type="text" value={this.state.input2} onChange={this.handleChange} /> </div> ); }, handleChange: function(e){ this.setState({ ??? : e.target.value}); t = this.state.input1 …

141 javascript  reactjs  jsx 

Saya memiliki komponen fungsional yang sangat sederhana sebagai berikut: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; Dan komponen lainnya: import * as React from "react"; export interface LayoutProps { children: React.ReactNode } const layout …

138 reactjs  typescript  jsx  typescript2.0 

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 

Saya menggunakan & nbsp tag di jsx dan tidak memberikan spasi. Berikut ini adalah potongan kecil kode saya. Tolong bantu. var Reporting=React.createClass({ render: function(){ return( <div style={divPositionReporting}> <p>Pricing Reports</p> <hr></hr> Select Scenario:   <select> <option></option> </select> <button type="button">Get Pricing Report</button> <br/> Select Takeout Scenario:  <select> <option></option> </select> <button type="button">Get Pricing Report</button> …

101 html  reactjs  jsx 

Saya memiliki elemen kotak centang TSX (JSX): <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> Dengan bantuan kode VS saya tahu bahwa jenis parameter input this.handleCheckboxClickadalah MouseEvent<HTMLInputElement>. Jadi saya menerapkannya dengan: private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } Kemudian saya mendapatkan kesalahan yang mengatakan [ts] Type 'MouseEvent' is not generic.Seperti yang ditunjukkan pada gambar …

92 reactjs  typescript  events  types  jsx 

Saya sedang mengerjakan proyek dengan Typecript, React dan Redux (semua berjalan di Electron), dan saya mengalami masalah ketika saya memasukkan satu komponen berbasis kelas ke komponen lain dan mencoba untuk melewatkan parameter di antara mereka. Secara longgar, saya memiliki struktur berikut untuk komponen container: class ContainerComponent extends React.Component<any,any> { .. …

91 reactjs  typescript  redux  electron  jsx