«reactjs» etiketlenmiş sorular

Bu kodu akılda tutarak: var Component = React.createClass({ getInitialState: function () { return {position: 0}; }, componentDidMount: function () { setTimeout(this.setState({position: 1}), 3000); }, render: function () { return ( <div className="component"> {this.state.position} </div> ); } }); ReactDOM.render( <Component />, document.getElementById('main') ); Durumun ancak 3 saniye sonra değişmesi gerekmiyor mu? …

104 javascript  reactjs 

İşte ES6 aracılığıyla web paketindeki görüntüleri ve simgeleri içe aktarmak için mevcut iş akışım: 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} /> Bu hızla dağınık hale geliyor. İşte istediğim şey: import * from './images' <img src={doggy} /> <img src={turtle} …

104 reactjs  webpack  ecmascript-6 

React-router kullanan bir react uygulaması üzerinde çalışıyorum. Aşağıdaki gibi bir url'ye sahip bir proje sayfam var: myapplication.com/project/unique-project-id Proje bileşeni yüklendiğinde, componentDidMount olayından o proje için bir veri talebini tetiklerim. Şimdi, iki proje arasında doğrudan geçiş yaparsam, böylece yalnızca kimlik böyle değişirse bir sorunla karşılaşıyorum ... myapplication.com/project/982378632 myapplication.com/project/782387223 myapplication.com/project/198731289 componentDidMount tekrar …

104 reactjs  react-router 

Satır içi şekillendirme yaparken ReactJS'de bir hover olayı veya aktif olayı nasıl elde edebilirsiniz? OnMouseEnter, onMouseLeave yaklaşımının hatalı olduğunu buldum, bu yüzden bunu yapmanın başka bir yolu olduğunu umuyorum. Özellikle, fareyi bir bileşenin üzerine çok hızlı bir şekilde getirirseniz, yalnızca onMouseEnter olayı kaydedilir. OnMouseLeave hiçbir zaman ateşlemez ve bu nedenle …

104 javascript  css  reactjs  mouseevent  dom-events 

Ben sahip bir uygulama inşa ReactNative hem iOS için ve bir ile android ListView. Liste görünümü geçerli bir veri kaynağıyla doldurulurken, ekranın alt kısmında aşağıdaki uyarı yazdırılır: Uyarı: Bir dizi veya yineleyicideki her çocuk benzersiz bir "anahtar" özelliğine sahip olmalıdır. Oluşturma yöntemini kontrol edin ListView. Bu uyarının amacı nedir? Mesajdan …

104 facebook  listview  reactjs  react-native 

Karşılaştığım zaman kancaların belgelerine bakıyordum useRef. Örneğine bakarken… function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); } … İle useRefdeğiştirilebilir gibi …

104 javascript  reactjs  react-hooks 

/#/React-router kullanırken tarayıcının adres çubuğunda gösterilmesini engellemenin herhangi bir yolu var mı? Bu ReactJS ile. Örneğin, yeni bir rota gösterisine gitmek için bağlantılara tıklamak localhost:3000/#/veya localhost:3000/#/about. Rotaya bağlı olarak.

103 reactjs  react-router 

İşte formum ve onClick yöntemi. Klavyenin Enter butonuna basıldığında bu metodu uygulamak istiyorum. Nasıl ? NB: Hiçbir jquery takdir edilmiyor. 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 /> <button type="button" className="btn btn-success" …

103 reactjs  reactjs-flux 

Bu kadar basit bir şey kolayca başarılmalı, yine de saçlarımı ne kadar karmaşık olduğu konusunda çekiyorum. Tek yapmak istediğim, bir React bileşeninin montajını ve sökülmesini canlandırmak, hepsi bu. Şimdiye kadar denediklerim ve her çözümün neden işe yaramayacağı aşağıda açıklanmıştır: ReactCSSTransitionGroup - CSS sınıflarını hiç kullanmıyorum, hepsi JS stilleri, yani bu …

103 animation  reactjs  css-animations  greensock  react-motion 

Mevcut React sürümünün çalışma zamanında geliştirme mi yoksa üretim mi olduğunu tespit etmek mümkün mü? Bunun gibi bir şey yapmak istiyorum: if (React.isDevelopment) { // Development thing } else { // Real thing }

103 javascript  reactjs 

Başka bir görünüme yönlendirmek için react-router'ı ( sürüm ^ 1.0.3 ) kullanarak A BASİT yapmaya çalışıyorum ve sadece yoruluyorum. import React from 'react'; import {Router, Route, Link, RouteHandler} from 'react-router'; class HomeSection extends React.Component { static contextTypes = { router: PropTypes.func.isRequired }; constructor(props, context) { super(props, context); } handleClick = …

103 javascript  reactjs 

React with Hooks'ta durumu güncellemenin doğru yolu nedir, yuvalanmış bir nesne mi? export Example = () => { const [exampleState, setExampleState] = useState( {masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b" fieldTwoTwo: "c" } } }) İnsan nasıl kullanacağı setExampleStategüncelleme exampleStateiçin a(bir alan ekleme)? const a = { masterField: { …

103 javascript  reactjs  react-hooks 

componentDidMountDOM erişimi gerektiren her şey için neden uygun olduğunu anlıyorum , ancak bir AJAX isteğinin buna zorunlu olarak veya genellikle ihtiyaç duymadığını anlıyorum . Ne oluyor?

102 reactjs 

IndexRoute ve IndexLink kullanmanın amacının ne olduğunu anlamıyorum . Her durumda, About yolu etkinleştirilmedikçe, aşağıdaki kodun önce Home bileşenini seçeceği anlaşılıyor. <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> Buradaki ilk vakanın avantajı / amacı nedir?

102 javascript  reactjs  react-router  url-routing 

Bir grup basketbol takımım olan bir tarafım var. Bu yüzden, bir takımın üzerine gelindiğinde her takım için farklı bir şey göstermek istiyorum. Ayrıca, Reactjs kullanıyorum, böylece bir değişkenim olsaydı harika olacak başka bir bileşene geçebilirim.

102 hover  reactjs