タグ付けされた質問 「reactjs」

labelsを含むフォーム要素があり、s labelをhtmlFor属性を含む要素にリンクするための一意のIDが必要です。このようなもの： React.createClass({ render() { const id = ???; return ( <label htmlFor={id}>My label</label> <input id={id} type="text"/> ); } }); 以前はに基づいてIDを生成してthis._rootNodeIDいましたが、React 0.13以降は使用できません。今それを行うための最善かつ/または最も簡単な方法は何ですか？

128 reactjs 

Jasmine Enzymeの浅いレンダリングでReactコンポーネントをテストしています。 この質問のためにここでは簡略化しています... function MyOuterComponent() { return ( <div> ... <MyInnerComponent title="Hello" /> ... <MyInnerComponent title="Good-bye" /> ... </div> ) } MyOuterComponentの2つのインスタンスがMyInnerComponentあり、それぞれで小道具をテストしたいと思います。 最初にテストする方法を知っています。で使用findしていfirstます... expect(component.find('MyInnerComponent').first()).toHaveProp('title', 'Hello'); ただし、の2番目のインスタンスをテストするのに苦労していますMyInnerComponent。 このようなものがうまくいくことを願っていました... expect(component.find('MyInnerComponent').second()).toHaveProp('title', 'Good-bye'); またはこれ... expect(component.find('MyInnerComponent')[1]).toHaveProp('title', 'Good-bye'); しかし、もちろん上記のどちらも機能しません。 私は明らかなことを逃しているように感じます。 しかし、ドキュメントを調べても、類似した例はありません。 誰でも？

128 reactjs  jasmine  enzyme 

ReactJSの学習中に、「マウント」という用語を何度も聞いています。そして、この用語に関してライフサイクルの方法とエラーがあるようです。Reactはマウントとはどういう意味ですか？ 例： componentDidMount() and componentWillMount()

128 javascript  reactjs 

APIサーバーからトークンを取得するreact / reduxアプリケーションがあります。ユーザーが認証された後、すべてのaxiosリクエストがそのトークンをAuthorizationヘッダーとして持つようにし、アクション内のすべてのリクエストに手動でトークンを添付する必要がないようにします。私は反応/ reduxをかなり始めたばかりで、最善のアプローチについて確信が持てず、Googleで質の高いヒットを見つけていません。 これが私のreduxセットアップです： // actions.js import axios from 'axios'; export function loginUser(props) { const url = `https://api.mydomain.com/login/`; const { email, password } = props; const request = axios.post(url, { email, password }); return { type: LOGIN_USER, payload: request }; } export function fetchPages() { /* here is where …

128 reactjs  redux  axios 

SVGマークアップをReactJSコンポーネントに埋め込むことはできますか？ render: function() { return ( <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ... </span> ); } エラーの結果： 名前空間属性はサポートされていません。ReactJSXはXMLではありません。 これを行う最も簡単な方法は何ですか。React ARTのようなものを使用することは、私がやろうとしていることに対してはやり過ぎです。

127 javascript  svg  reactjs 

私はReactJSとUIが初めてで、ReactJSコードからRESTベースの簡単なPOST呼び出しを行う方法を知りたいと思っていました。 何か例があるなら、それは本当に役に立ちます。

126 reactjs  reactjs-flux  reactjs-native 

私はちょうどthis.setState()任意のコンポーネントの反応関数が非同期であるか、それが呼び出された関数の完了後に呼び出されることを発見しました。 今、私はこのブログを検索して見つけました（setState（）State Mutation Operation May Resyncous In ReactJS） ここで彼はそれを発見しました setStateは、状態の変化がどのようにトリガーされたかに応じて、非同期（スタックが空のときに呼び出される）または同期（呼び出されるとすぐに呼び出される）。 今これら二つは消化するのが難しい ブログでは、setState関数は関数内で呼び出されますupdateStateが、updateState関数をトリガーしたのは、呼び出された関数が知っているものではありません。 setStateJSが単一スレッド言語であり、このsetStateがWebAPIまたはサーバー呼び出しではないため、なぜJSのスレッドでのみ実行する必要があるのか、なぜ非同期になるのでしょうか。彼らはこれを行っているので、再レンダリングによってすべてのイベントリスナーなどが停止することはありませんか、それとも他の設計上の問題があります。

126 javascript  multithreading  asynchronous  reactjs 

ReactJSコンポーネント内でevent.stopPropagation（）を使用して、レガシーコードでJQueryに添付されたクリックイベントが発生し、クリックイベントがトリガーされるのを停止しようとしていますが、ReactのstopPropagation（）がイベントへの伝播を停止するだけのようですReactにもアタッチされており、JQueryのstopPropagation（）は、Reactにアタッチされたイベントへの伝播を停止しません。 これらのイベントでstopPropagation（）を機能させる方法はありますか？これらの動作を示すために、簡単なJSFiddleを作成しました。 /** @jsx React.DOM */ var Propagation = React.createClass({ alert: function(){ alert('React Alert'); }, stopPropagation: function(e){ e.stopPropagation(); }, render: function(){ return ( <div> <div onClick={this.alert}> <a href="#" onClick={this.stopPropagation}>React Stop Propagation on React Event</a> </div> <div className="alert"> <a href="#" onClick={this.stopPropagation}>React Stop Propagation on JQuery Event</a> </div> <div onClick={this.alert}> <a href="#" …

126 javascript  jquery  reactjs 

チャットシステムを構築して、ウィンドウに入ったときや新しいメッセージが届いたときに自動的に一番下までスクロールしたいのですが、Reactでコンテナーの一番下まで自動的にスクロールするにはどうすればよいですか？

126 reactjs 

私はjavascript / redux / reactの初心者で、redux、react-redux、reactを使用して小さなアプリケーションを作成しています。何らかの理由で、connect（react-reduxバインディング）と並行してmapDispatchToProps関数を使用すると、結果のプロップを実行しようとすると、ディスパッチが関数ではないことを示すTypeErrorが表示されます。ただし、ディスパッチを小道具として呼び出すと（提供されたコードのsetAddr関数を参照）、機能します。 なぜなのか、私は知りたいのですが、reduxドキュメントのTODOアプリの例では、mapDispatchToPropsメソッドが同じ方法で設定されています。関数内のconsole.log（dispatch）は、ディスパッチがオブジェクト型であると述べています。この方法でディスパッチを使い続けることもできますが、reduxをさらに続行する前に、なぜこれが起こっているのかを理解するのが良いでしょう。私はコンパイルにbabel-loadersでwebpackを使用しています。 私のコード： import React, { PropTypes, Component } from 'react'; import { connect } from 'react-redux'; import { setAddresses } from '../actions.js'; import GeoCode from './geoCode.js'; import FlatButton from 'material-ui/lib/flat-button'; const Start = React.createClass({ propTypes: { onSubmit: PropTypes.func.isRequired }, setAddr: function(){ this.props.dispatch( setAddresses({ pickup: this.refs.pickup.state.address, …

124 javascript  reactjs  redux  react-redux 

reactjsでEscキープレスを検出するにはどうすればよいですか？jqueryと同様のもの $(document).keyup(function(e) { if (e.keyCode == 27) { // escape key maps to keycode `27` // <DO YOUR WORK HERE> } }); 検出されたら、情報をコンポーネントに渡します。3つのコンポーネントがあり、そのうち最後のアクティブなコンポーネントがエスケープキーを押すと反応する必要があります。 コンポーネントがアクティブになると、一種の登録を考えていました class Layout extends React.Component { onActive(escFunction){ this.escFunction = escFunction; } onEscPress(){ if(_.isFunction(this.escFunction)){ this.escFunction() } } render(){ return ( <div class="root"> <ActionPanel onActive={this.onActive.bind(this)}/> <DataPanel onActive={this.onActive.bind(this)}/> <ResultPanel onActive={this.onActive.bind(this)}/> …

124 javascript  reactjs 

私は作業していてcreate-react-app、この問題に遭遇しましたHome does not contain an export named Home。 App.jsファイルの設定方法は次のとおりです。 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import { Home } from './layouts/Home' class App extends Component { render() { return ( <div className="App"> Hello <Home /> </div> ) } } export default App; 今私のlayoutsフォルダにはHome.jsファイルがあります。以下のように設定します。 …

123 javascript  reactjs  ecmascript-6  create-react-app 

どちらにもルート、リンクなどがあります。どちらを使用するのですか？それぞれをどこで使用するか本当に混乱しています。サーバ側？クライアント側？ https://reacttraining.com/react-router/ 一部の例では、履歴を渡す必要がありますが、そうでない場合もあります。何をすべきか？ <Router history={browserHistory}> 対 <Router> どちらか一方をいつ使用するかは本当に混乱します。

123 reactjs  react-router 

useState配列のReactフック内に要素をプッシュする方法は？それは反応状態の古い方法としてですか？または何か新しいもの？ 例：setStateプッシュの例？

123 javascript  reactjs  react-hooks 

ストアが独自の状態を維持し、その際にネットワークおよびデータストレージサービスを呼び出す機能を持っている場合、その場合のアクションは単なるメッセージパサーです。 -または- ...ストアは、アクションからの不変データの愚かな受信者である必要があります（アクションは、外部ソース間でデータをフェッチ/送信するものですか？このインスタンスのストアは、ビューモデルとして機能し、それらを集約/フィルタリングできます。アクションによって供給された不変データに基づいて独自の状態ベースを設定する前のデータ。 それはどちらか一方でなければならないようです（両方の組み合わせではありません）。もしそうなら、なぜ一方が他方よりも好ましい/推奨されるのですか？

122 reactjs  reactjs-flux