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

create-react-appを使用して開発しているときに、ブラウザーは警告時にデバッガーモードに入ります。 それはreact-dev-toolsのソースコードで壊れます： // --- Welcome to debugging with React DevTools --- // This debugger statement means that you've enabled the "break on warnings" feature. // Use the browser's Call Stack panel to step out of this override function- // to where the original warning or error was logged. この動作を無効にするにはどうすればよいですか？

87 reactjs  javascript-debugger 

問題 refインライン関数定義を使用してreactを設定しています render = () => { return ( <div className="drawer" ref={drawer => this.drawerRef = drawer}> 次にcomponentDidMount、DOM参照が設定されていません componentDidMount = () => { // this.drawerRef is not defined 私の理解では、refコールバックはマウント中に実行する必要がありますが、console.logステートメントを追加するcomponentDidMountと、refコールバック関数の前に呼び出されます。 私は、例えば、見てきた他のコードサンプルこの議論githubの上には、同じ仮定を示すcomponentDidMountと呼ばれるべき後の任意refに定義されたコールバックrenderそれはさえています、会話の中で述べました それで、すべてのrefコールバックが実行された後、componentDidMountが起動されますか？ はい。 私はreact15.4.1を使用しています 私が試した他の何か ref関数が呼び出されていることを確認するために、クラスで関数を定義してみました setDrawerRef = (drawer) => { this.drawerRef = drawer; } その後、 render <div className="drawer" ref={this.setDrawerRef}> この場合のコンソールログは、コールバックが実際に呼び出されていることを示しています componentDidMount

87 javascript  reactjs 

私はreactnativeナビゲーション（react-navigation）StackNavigatorを使用しています。これは、アプリのライフサイクル全体を通じてログインページから始まります。ログイン画面に戻るという戻るオプションは必要ありません。ログイン画面の後に画面に非表示にする方法を知っている人はいますか？ところで、私はまた、以下を使用してログイン画面にそれを隠しています： const MainStack = StackNavigator({ Login: { screen: Login, navigationOptions: { title: "Login", header: { visible: false, }, }, }, // ... other screens here })

87 reactjs  react-native  navigation  react-navigation 

reduxストアにrefを保存し、mapStateToPropsを使用して、それにアクセスする必要のあるコンポーネントのrefを公開しています。 保存される参照は次のようになります。 ref={node => this.myRefToBePutInReduxGlobalStore = node} この参照の正しいpropTypeは何ですか？

87 reactjs 

私はreactでリンクをレンダリングしています： render: -> `<a className="upvotes" onClick={this.upvote}>upvote</a>` 次に、上記に賛成票機能があります。 upvote: -> // do stuff (ajax) リンクの前に私はその場所にスパンしていましたが、リンクに切り替える必要があり、ここに問題があります-.upvotesページをクリックするたびに更新され、これまでに試したことは次のとおりです。 event.preventDefault（）-機能していません。 upvote: (e) -> e.preventDefault() // do stuff (ajax) event.stopPropagation（）-機能していません。 upvote: (e) -> e.stopPropagation() // do stuff (ajax) falseを返します-機能しません。 upvote: (e) -> // do stuff (ajax) return false index.htmlでjQueryを使用して上記のすべてを試しましたが、何も機能しないようです。ここで何をすべきで、何が間違っているのですか？event.typeを確認しましたが、clickどういうわけかリダイレクトを回避できるはずです。 すみません、Reactに関しては私は新人です。 ありがとうございました！

87 reactjs  hyperlink  coffeescript  preventdefault 

ルーティングに反応してビューを変更するのに問題があります。ユーザーのリストのみを表示したいので、各ユーザーをクリックすると詳細ページに移動する必要があります。ルーターは次のとおりです。 import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from 'react-router-dom'; import Users from "./components/Users"; import { Router, Route } from "react-router"; import Details from "./components/Details"; ReactDOM.render(( <BrowserRouter> <div> <Route path="/" component={Users} /> <Route path="/details" component={Details} /> </div> </BrowserRouter> ), document.getElementById('app')) URL / detailsを使用すると、ブラウザはそのURLに移動しますが、ビューは変更されません。他のルートは404をスローするため、ルートを認識しているように見えますが、更新されていません。

87 reactjs  react-router 

Reactコンポーネントを使用する複雑なWebページがあり、ページを静的レイアウトからより応答性が高く、サイズ変更可能なレイアウトに変換しようとしています。しかし、私はReactで制限に直面し続けており、これらの問題を処理するための標準的なパターンがあるかどうか疑問に思っています。私の特定のケースでは、display：table-cellとwidth：autoを持つdivとしてレンダリングされるコンポーネントがあります。 残念ながら、コンポーネントの幅をクエリすることはできません。これは、要素が実際にDOM（実際にレンダリングされた幅を推定するための完全なコンテキストを持っている）に配置されない限り、要素のサイズを計算できないためです。これをマウスの相対的な配置などに使用するだけでなく、コンポーネント内のSVG要素に幅属性を適切に設定するためにも必要です。 さらに、ウィンドウのサイズが変更された場合、セットアップ中にあるコンポーネントから別のコンポーネントにサイズの変更を伝えるにはどうすればよいですか？サードパーティのSVGレンダリングはすべてshouldComponentUpdateで実行していますが、自分自身またはそのメソッド内の他の子コンポーネントに状態やプロパティを設定することはできません。 Reactを使用してこの問題に対処する標準的な方法はありますか？

86 javascript  reactjs  responsive 

私はおそらく非常に明白な何かを見逃しているので、自分自身をクリアしたいと思います。 これが私の理解です。 ナイーブなreactコンポーネントには、states＆がありpropsます。で更新すると、コンポーネント全体stateがsetState再レンダリングされます。propsほとんどが読み取り専用であり、更新しても意味がありません。 のようなものを介してreduxストアにサブスクライブするreactコンポーネントでstore.subscribe(render)は、ストアが更新されるたびに明らかに再レンダリングされます。 react-reduxにはconnect()、状態ツリーの一部（コンポーネントに関係する）とactionCreatorsをコンポーネントに関して挿入するヘルパーがpropsあります。 const TodoListComponent = connect( mapStateToProps, mapDispatchToProps )(TodoList) しかし、ことを理解した上でsetState必要不可欠であるTodoListComponentReduxの状態ツリーの変更（再描画）に反応するように、私はすべてを見つけることができないstateかsetStateで関連するコードTodoListコンポーネントファイルを。これは次のようになります。 const TodoList = ({ todos, onTodoClick }) => ( <ul> {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} /> )} </ul> ) 誰かが私が欠けているものに関して正しい方向に私を向けることができますか？ PS私はreduxパッケージにバンドルされているtodoリストの例に従っています。

86 reactjs  redux  react-redux 

Reactでは、状態はすぐには更新されないため、でコールバックを使用できますsetState(state, callback)。しかし、Reduxでそれを行う方法は？ を呼び出した後、this.props.dispatch(updateState(key, value))すぐに更新された状態で何かをする必要があります。 Reactで行うように、最新の状態でコールバックを呼び出す方法はありますか？

86 javascript  reactjs  redux 

私はReactでフィルター可能なリストを実装しているところです。リストの構造は下の画像のようになっています。 前提 これがどのように機能するかについての説明です： 状態は、最上位のコンポーネントであるSearchコンポーネントに存在します。 状態は次のように記述されます。 {{ 表示：ブール値、 ファイル：配列、 フィルタリング：配列、 クエリ文字列、 currentSelectedIndex：整数 } files は、ファイルパスを含む潜在的に非常に大きな配列です（10000エントリが妥当な数です）。 filteredユーザーが少なくとも2文字を入力した後、フィルター処理された配列です。私はそれが派生データであることを知っているので、それを状態に保存することについて議論することができますが、それは currentlySelectedIndex これは、フィルタリングされたリストから現在選択されている要素のインデックスです。 ユーザーがInputコンポーネントに2文字以上を入力すると、配列がフィルタリングされ、フィルタリングされた配列のエントリごとにResultコンポーネントがレンダリングされます。 各Resultコンポーネントは、クエリに部分的に一致した完全なパスを表示しており、パスの部分的に一致した部分が強調表示されています。たとえば、結果コンポーネントのDOMは、ユーザーが「le」と入力した場合、次のようになります。 <li>this/is/a/fi<strong>le</strong>/path</li> Inputコンポーネントがフォーカスされているときにユーザーが上キーまたは下キーを押すcurrentlySelectedIndexと、filtered配列に基づいて変更が行われます。これにより、Resultインデックスに一致するコンポーネントが選択済みとしてマークされ、再レンダリングが発生します。 問題 最初はfiles、Reactの開発バージョンを使用して、十分に小さい配列でこれをテストしましたが、すべて正常に機能しました。 この問題は、files10000エントリもの大きな配列を処理する必要があるときに発生しました。入力に2文字を入力すると大きなリストが生成され、上下のキーを押してナビゲートすると非常に遅くなります。 最初は、要素に対して定義されたコンポーネントResultがなく、Searchコンポーネントの各レンダリングで、その場でリストを作成するだけでした。 results = this.state.filtered.map(function(file, index) { var start, end, matchIndex, match = this.state.query; matchIndex = file.indexOf(match); start = file.slice(0, matchIndex); end = file.slice(matchIndex + match.length); return …

86 javascript  list  reactjs 

Facebookを使用しReactます。設定ページに、textareaユーザーが複数行のテキスト（私の場合は住所）を入力できる複数行があります。 <textarea value={address} /> アドレスを表示しようとすると、のように{address}、改行が表示されず、すべて1行になります。 <p>{address}</p> これを解決する方法はありますか？

86 javascript  reactjs  textarea 

私は自分のreactサイトでGoogleAnalyticsをセットアップしようとしていますが、いくつかのパッケージに出くわしましたが、例として私が持っているようなセットアップはありません。誰かがこれに光を当てることができることを望んでいました。 私が見ているパッケージは、react-gaです。 私のレンダリングメソッドはindex.js次のようになります。 React.render(( <Router history={createBrowserHistory()}> <Route path="/" component={App}> <IndexRoute component={Home} onLeave={closeHeader}/> <Route path="/about" component={About} onLeave={closeHeader}/> <Route path="/gallery" component={Gallery} onLeave={closeHeader}/> <Route path="/contact-us" component={Contact} onLeave={closeHeader}> <Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/> </Route> <Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} /> <Route path="/feedback" component={Feedback} onLeave={closeHeader} /> </Route> <Route path="*" component={NoMatch} onLeave={closeHeader}/> </Router>), document.getElementById('root'));

86 google-analytics  reactjs  react-router 

escapeプレス時にアクティブなreactブートストラップポップオーバーを閉じるためにバインドしたいです。コードは次のとおりです。 _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", this._handleDocumentClick, false); document.addEventListener("keyPress", this._handleEscKey, false); }, componentWillUnmount: function() { BannerDataStore.removeChangeListener(this._onchange); document.removeEventListener("click", this._handleDocumentClick, false); document.removeEventListener("keyPress", this._handleEscKey, false); }, しかし、いずれかのキーを押しても、コンソールに何もログインしません。私はウィンドウでもそれをさまざまなケースで聴こうとしました。「keypress」、「keyup」などですが、何か間違ったことをしているようです。

86 reactjs  react-jsx  react-bootstrap 

Create React Appを使い始めましたが、がどのようにindex.js読み込まれるのか理解できませんindex.html。これはhtmlコードです： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <!-- Notice the use of %PUBLIC_URL% in the tag above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be …

86 javascript  html  reactjs  create-react-app 

Reduxアプリの初期状態は、次の2つの方法で設定できます。 2番目の引数としてcreateStore（docs link）に渡します それを最初の引数として（サブ）削減者に渡します（ドキュメントリンク） 初期状態をストアに渡す場合、ストアからその状態をどのように読み取り、それをレデューサーの最初の引数にしますか？

85 javascript  reactjs  redux