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

ReactJSでプログラミングしているときにAxiosを使用していて、サーバーにDELETEリクエストを送信するふりをしています。 そのためには、ヘッダーが必要です。 headers: { 'Authorization': ... } 体はで構成されています var payload = { "username": .. } 私はインターウェブを検索してきましたが、DELETEメソッドには「param」が必要であり、「data」を受け入れないことがわかりました。 私はそれを次のように送信しようとしています： axios.delete(URL, payload, header); あるいは axios.delete(URL, {params: payload}, header); しかし、何も機能していないようです... ヘッダーと本文の両方を含むDELETEリクエストを送信することが可能かどうか（そうだと思います）、その方法を教えてもらえますか？ 前もって感謝します！

116 javascript  reactjs  http  axios  http-delete 

次のコンポーネント（radioOther.jsx）があります。 'use strict'; //module.exports = <-- omitted in update class RadioOther extends React.Component { // omitted in update // getInitialState() { // propTypes: { // name: React.PropTypes.string.isRequired // } // return { // otherChecked: false // } // } componentDidUpdate(prevProps, prevState) { var otherRadBtn = this.refs.otherRadBtn.getDOMNode(); if (prevState.otherChecked !== otherRadBtn.checked) …

115 reactjs  ecmascript-6 

Xcodeで反応ネイティブのiOSアプリをビルドしているときにこのエラーが発生します。 npmのインストールとrpmリンクのreact-native-fsライブラリの後にこのエラーが発生し始めました。しかし、解決策をオンラインで検索した後、他の反応ネイティブライブラリをインストールしているときに多くの人が同じエラーを受け取っていることに気づきました。 多くの人が提案する可能な解決策は、「ビルド設定」->「ヘッダー検索パス」の下に以下を追加することです。 $(SRCROOT)/../node_modules/react-native/React -（再帰的） しかし、この解決策では運が悪く、それでも同じエラーが発生します

115 ios  xcode  reactjs  native  react-native-ios 

現在のスクロール位置、または<ScrollView>React Nativeのコンポーネントの現在のページを取得することは可能ですか？ したがって、次のようなもの： <ScrollView horizontal={true} pagingEnabled={true} onScrollAnimationEnd={() => { // get this scrollview's current page or x/y scroll position }}> this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt> }) </ScrollView>

115 ios  reactjs  react-native 

ReactJSアプリで、特定のページから移動したときにユーザーに通知する必要があります。具体的には、アクションを実行するように促すポップアップメッセージ： 「変更は保存されていますが、まだ公開されていません。今すぐ実行しますか？」 これをreact-routerグローバルにトリガーする必要がありますか、これは反応ページ/コンポーネント内から実行できるものですか？ 後者については何も発見していないので、最初のものは避けたい。もちろん、それが標準でない限り、ユーザーがアクセスできる他のすべての可能なページにコードを追加する必要なしに、そのようなことを行う方法を疑問に思います。 どんな洞察も歓迎します、ありがとう！

115 reactjs  react-router 

私は以下のようなuseEffectの例を試していました： useEffect(async () => { try { const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`); const json = await response.json(); setPosts(json.data.children.map(it => it.data)); } catch (e) { console.error(e); } }, []); コードスニペットを実行する結果を非表示スニペットを展開 コンソールにこの警告が表示されます。しかし、私が考える非同期呼び出しでは、クリーンアップはオプションです。なぜこの警告が出るのかわかりません。サンドボックスをリンクして例を示します。https://codesandbox.io/s/24rj871r0p

115 javascript  reactjs  react-hooks 

したがって、通常、シンプルなスタイル設定を必要とするSVGアイコンのほとんどを含めるために、次のようにします。 <svg> <use xlink:href="/svg/svg-sprite#my-icon" /> </svg> 今、私は遅れて私の新しいフロントエンド開発スタックの可能性の成分として、それを評価するようReactJSで演奏されているしかし、私は、サポートされているタグ/属性のリストであることに気づいていないどちらuseかxlink:hrefサポートされています。 svgスプライトを使用して、ReactJSでこのようにロードすることは可能ですか？

114 svg  sprite  reactjs 

このアプリケーションでは、無限スクロールを使用して、異種のアイテムの大きなリストをナビゲートします。いくつかのしわがあります。 ユーザーが10,000アイテムのリストを持ち、3k以上をスクロールする必要があるのはよくあることです。 これらは豊富なアイテムであるため、ブラウザのパフォーマンスが受け入れられなくなるまでに、DOMに数百しか存在できません。 アイテムの高さはさまざまです。 アイテムには画像が含まれている場合があり、ユーザーは特定の日付にジャンプできます。これは、ビューポートの上に画像をロードする必要があるリストのポイントにユーザーがジャンプできるため、ロードするとコンテンツが押し下げられるため、これはトリッキーです。これを処理できない場合、ユーザーは日付にジャンプしても、以前の日付にシフトする可能性があります。 既知の不完全なソリューション： （react-infinite-scroll）-これは、単純な「下にヒットしたときにさらにロードする」コンポーネントです。DOMを排除することはないため、何千ものアイテムで死んでしまいます。 （Reactを使用したスクロール位置）- 両方ではなく、上部に挿入するか下部に挿入するときに、スクロール位置を保存および復元する方法を示します。 完全なソリューションのコードを探しているのではありません（それはすばらしいでしょう）。代わりに、この状況をモデル化するための「Reactの方法」を探しています。スクロール位置の状態ですか？リストで自分の位置を保持するには、どの状態を追跡する必要がありますか？レンダリングされたものの下部または上部の近くでスクロールしたときに新しいレンダリングをトリガーするには、どの状態を維持する必要がありますか？

114 javascript  html  infinite-scroll  reactjs 

最大の利点の一つReact.jsをすることになっているサーバー側のレンダリング。問題は、主要な機能React.renderComponentToString()が同期的であり、コンポーネント階層がサーバー上でレンダリングされるときに非同期データをロードできないことです。 コメント用の汎用コンポーネントがあり、ページのどこにでもドロップできるとしましょう。プロパティは1つだけで、なんらかの識別子（コメントが配置されている記事のIDなど）とその他すべてはコンポーネント自体（コメントの読み込み、追加、管理）によって処理されます。 Fluxアーキテクチャは、多くのことがはるかに簡単になり、そのストアがサーバーとクライアントの間で状態を共有するのに最適であるため、本当に気に入っています。コメントを含むストアを初期化したら、それをシリアル化してサーバーからクライアントに送信し、簡単に復元できます。 問題は、私のストアにデータを追加するための最良の方法は何ですか。過去数日間、私は多くのことをグググルグしていて、いくつかの戦略に出くわしましたが、Reactのこの機能がどれだけ「促進」されているかを考えると、どれも本当に良いようには見えませんでした。 私の意見では、最も簡単な方法は、実際のレンダリングが始まる前にすべてのストアにデータを取り込むことです。これは、コンポーネント階層の外側のどこかを意味します（たとえば、ルーターにフックされています）。このアプローチの問題は、ページ構造をほぼ2回定義する必要があることです。たとえば、多くの異なるコンポーネント（実際のブログ投稿、コメント、関連投稿、最新の投稿、Twitterストリーム...）を含むブログページなど、より複雑なページを考えてみます。Reactコンポーネントを使用してページ構造を設計する必要があり、それから別の場所で、この現在のページに必要な各ストアにデータを取り込むプロセスを定義する必要があります。それは私にとって良い解決策のようには思えません。残念ながら、ほとんどの同形のチュートリアルはこのように設計されています（たとえば、この素晴らしいflux-tutorial）。 React-async。このアプローチは完璧です。これにより、各コンポーネントの特別な関数で状態を初期化する方法（同期か非同期かは関係ありません）を簡単に定義でき、階層がHTMLにレンダリングされるときにこれらの関数が呼び出されます。これは、状態が完全に初期化されるまでコンポーネントがレンダリングされないように機能します。問題は繊維が必要なことですこれは、私が理解している限り、標準のJavaScriptの動作を変更するNode.js拡張機能です。結果は本当に気に入っていますが、解決策を見つけるのではなく、ゲームのルールを変更したようです。そして、React.jsのこのコア機能を使用するためにこれを強制される必要はありません。このソリューションの一般的なサポートについてもわかりません。標準のNode.js Webホスティングでファイバーを使用することは可能ですか？ 私は少し独りで考えていました。実装の詳細についてはあまり考えていませんが、一般的な考え方は、コンポーネントをReact-asyncと同じように拡張し、ルートコンポーネントでReact.renderComponentToString（）を繰り返し呼び出すというものです。各パスの間に、拡張コールバックを収集し、パスのandでそれらを呼び出して、ストアにデータを取り込みます。現在のコンポーネント階層に必要なすべてのストアにデータが入力されるまで、この手順を繰り返します。解決しなければならないことがたくさんあり、特にパフォーマンスについてはよくわかりません。 私は何か見落としてますか？別のアプローチ/解決策はありますか？現在、react-async / fibersの方法を検討していますが、2番目のポイントで説明したように、完全にはわかりません。 GitHubに関する関連ディスカッション。どうやら、公式なアプローチもソリューションもありません。おそらく本当の問題は、Reactコンポーネントがどのように使用されることが意図されているかです。シンプルなビューレイヤー（かなり私の提案の1番目）のように、または実際の独立したスタンドアロンコンポーネントのように？

114 node.js  reactjs  flux  reactjs-flux 

私はReactをいじっていてDate.now()、画面にレンダリングするだけの次の時間コンポーネントを持っています： import React, { Component } from 'react'; class TimeComponent extends Component { constructor(props){ super(props); this.state = { time: Date.now() }; } render(){ return( <div> { this.state.time } </div> ); } componentDidMount() { console.log("TimeComponent Mounted...") } } export default TimeComponent; このコンポーネントを毎秒更新して、Reactの観点から時間を再描画する最良の方法は何ですか？

114 javascript  reactjs 

私はこの質問がすでに何度か尋ねられていることを知っていますが、ほとんどの場合、解決策は親でこれを処理することです。責任の流れが下降しているだけだからです。ただし、コンポーネントをそのメソッドの1つから強制終了する必要がある場合があります。その小道具を変更できないことはわかっています。状態としてブール値を追加し始めると、単純なコンポーネントの場合は本当に面倒になります。これが私が達成しようとしていることです：小さなエラーボックスコンポーネントで、それを閉じるための「x」があります。小道具を介してエラーを受け取ると表示されますが、独自のコードからそれを閉じる方法が欲しいのですが。 class ErrorBoxComponent extends React.Component { dismiss() { // What should I put here? } render() { if (!this.props.error) { return null; } return ( <div data-alert className="alert-box error-box"> {this.props.error} <a href="#" className="close" onClick={this.dismiss.bind(this)}>×</a> </div> ); } } export default ErrorBoxComponent; そして、私はそれを親コンポーネントで次のように使用します： <ErrorBox error={this.state.error}/> セクションでは 、私はここで何を置くべきですか？、私はすでに試しました： ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode); これはコンソールに素敵なエラーを投げます： 警告：unmountComponentAtNode（）：アンマウントしようとしているノードは、Reactによってレンダリングされたものであり、最上位のコンテナではありません。代わりに、このコンポーネントを削除するために、親コンポーネントの状態を更新して再レンダリングしてください。 ErrorBox状態で着信プロップをコピーし、内部でのみ操作する必要がありますか？

114 reactjs  unmount 

これが基本コンポーネントです。どちら<ul>と<li>onClickの機能を持っています。onClickのみを起動し、は起動し<li>ないようにし<ul>ます。どうすればこれを達成できますか？ e.preventDefault（）、e.stopPropagation（）をいじってみましたが、役に立ちませんでした。 class List extends React.Component { constructor(props) { super(props); } handleClick() { // do something } render() { return ( <ul onClick={(e) => { console.log('parent'); this.handleClick(); }} > <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} > </li> </ul> ) } } // => parent …

114 reactjs  onclick  event-propagation 

適用するいくつかの副作用があり、それらを整理する方法を知りたいです： 単一のuseEffectとして またはいくつかのuseEffects パフォーマンスとアーキテクチャの点で何が優れていますか？

114 reactjs  react-hooks 

React with Hooksで、状態を更新する正しい方法は何ですか？ネストされたオブジェクトですか？ export Example = () => { const [exampleState, setExampleState] = useState( {masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b" fieldTwoTwo: "c" } } }) （フィールドの追加）setExampleStateに更新exampleStateするには、どのように使用しaますか？ const a = { masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b", fieldTwoTwo: "c" } }, masterField2: { fieldOne: "c", fieldTwo: { …

114 javascript  reactjs  react-hooks 

単純なレンダリング機能を持つコンポーネントを追加することで、Reactの探索を開始しました。 render() { return <div class="myApp"></div> } アプリを実行すると、次のエラーが発生します。 Warning: Unknown DOM property class. Did you mean className? これをに変更classすることで解決できclassNameます。 質問は; Reactはこの規約を強制しますか？また、なぜclassName従来の代わりに使用する必要があるのclassですか？これが制限である場合、それはJSX構文によるものですか、それとも他の場所によるものですか？

113 javascript  reactjs  react-jsx