«jsx» etiketlenmiş sorular

Çocuklarını oluşturan basit bir bileşen göz önüne alındığında: class ContainerComponent extends Component { static propTypes = { children: PropTypes.object.isRequired, } render() { return ( <div> {this.props.children} </div> ); } } export default ContainerComponent; Soru: Çocuk propinin propTipi ne olmalı? Bir nesne olarak ayarladığımda, bileşeni birden çok çocukla kullandığımda başarısız oluyor: …

265 reactjs  jsx  react-proptypes 

Çalışırken çok kafa karıştırıcı bulduğum bir şey var React. İnternette .js, tepki içeren .jsxdosyaları kullanan birçok örnek vardır, ancak birçoğu dosyaları kullanır . Ben .jsxdosyaları hakkında okudum ve benim anlayış sadece içinde html etiketleri yazmak izin olmasıdır javascript. Fakat aynı şey .jsdosyalara da yazılabilir . Peki bu iki uzantı .jsve …

211 reactjs  jsx 

İşte denediğim ve nasıl ters gittiği. Bu çalışıyor: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> Bu değil: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> Description özelliği, normal bir HTML içeriği dizesidir. Bununla birlikte, bazı nedenlerden dolayı HTML olarak değil, bir dize olarak oluşturulur. Herhangi bir öneri?

182 javascript  html  reactjs  jsx 

React'ın resmi belgelerinde bahsediyor - React sınıfı yaşam döngüsü yöntemlerini biliyorsanız, useEffect Hook'u componentDidMount, componentDidUpdate ve componentWillUnmount kombine olarak düşünebilirsiniz. Sorum şu - componentWillMount()lifecyle yöntemini bir kancada nasıl kullanabiliriz ?

176 javascript  reactjs  jsx  react-hooks 

Bir React bileşeni yazmaya çalışıyorum. html başlık etiketleri (h1, h2, h3, vb ...) için, burada başlık önceliği, aksesuarlarda tanımladığımız önceliğe göre dinamik olarak değişir. İşte yapmaya çalıştığım şey. <h{this.props.priority}>Hello</h{this.props.priority}> beklenen çıktı: <h1>Hello</h1> Bu çalışmıyor. Bunu yapmak için olası bir yöntem var mı?

163 reactjs  jsx 

Buna yaklaşmanın doğru yolunun ne olduğunu merak ediyorum: 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 + …

142 javascript  reactjs  jsx 

Aşağıdaki gibi çok basit bir işlevsel bileşene sahibim: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const aux = (props: AuxProps) => props.children; export default aux; Ve başka bir bileşen: import * as React from "react"; export interface LayoutProps { children: React.ReactNode } const layout …

140 reactjs  typescript  jsx  typescript2.0 

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 

& Nbsp etiketini jsx'te kullanıyorum ve alanı oluşturmuyorum. Aşağıdaki kodumun küçük bir parçasıdır.Lütfen yardım edin. 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> <br/> </div> ); }, });

101 html  reactjs  jsx 

Onay kutusu TSX (JSX) öğem var: <input type="checkbox" name={i.toString()} onClick={this.handleCheckboxClick} /> VS kod yardımıyla ben giriş parametresi türü olduğunu biliyoruz this.handleCheckboxClickolduğunu MouseEvent<HTMLInputElement>. Ben de bunu şu şekilde uyguladım: private handleCheckboxClick(event: MouseEvent<HTMLInputElement>) { ... } Ardından [ts] Type 'MouseEvent' is not generic.aşağıdaki resimde gösterildiği gibi bir hata alıyorum : Paketlerimin versiyonu: …

92 reactjs  typescript  events  types  jsx 

Typescript, React ve Redux ile bir proje üzerinde çalışıyorum (hepsi Electron'da çalışıyor) ve bir sınıfa dayalı bileşeni diğerine dahil ettiğimde ve aralarında parametreleri geçirmeye çalıştığımda bir sorunla karşılaşıyorum. Kabaca konuşursak, konteyner bileşeni için aşağıdaki yapıya sahibim: class ContainerComponent extends React.Component<any,any> { .. render() { const { propToPass } = this.props; …

91 reactjs  typescript  redux  electron  jsx 

Kurdum eslint& eslint-plugin-react. ESLint'i çalıştırdığımda, linter no-unused-varsher React bileşeni için hata veriyor. JSX veya React sözdizimi kullandığımı fark etmediğini varsayıyorum. Herhangi bir fikir? Misal: app.js import React, { Component } from 'react'; import Header from './header.js'; export default class App extends Component { render() { return ( <div> <Header /> …

91 javascript  reactjs  jsx  eslint