問題タブ [reactjs]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 小道具配列オブジェクトを更新しています
コンポーネントに渡され、@props を通じて利用可能な配列オブジェクトがあります。
実際には、何か (新しい配列) を追加したいと考えています。
これ以外に何をお勧めしますか:
add() を呼び出した後の結果は次のようになります。
ここでの最大の問題は、arr がガベージ コレクターによって破棄される可能性があることです。これは、ローカルのみであるため、手動で更新を強制する代わりに @setProps を使用することをお勧めします。
javascript - 子ノードを JSX と組み合わせるにはどうすればよいですか?
li 要素から ul リストを作成したいのですが、li 要素はさまざまなソースから取得されるため、1 つのステートメントでは実行できません。JSX は一連の子要素を処理できないようです。これにより、構文エラーが発生します。
理想的には、次のようなことをしたい:
これを達成する別の方法はありますか?
javascript - PhpStorm - 中括弧の自動挿入をオフにする方法
現在、私は JavaScript プログラミング (React フレームワーク) に PhpStorm を使用しています。React には、HTML を JavaScript コードに挿入できる JSX と呼ばれる特別な構文糖衣が追加されています。しかし、特定のJSXを挿入するとphpstormが間違ってしまうため、Enterキーを押して次の行に移動すると、常に不要な{
. この動作を抑制する方法はありますか?
javascript - Facebook React: 自動的にマウントされなかった不変の違反と要素
私は小さな例をやって Facebook React を学んでいます。バインディングに関する私の知識this
が大丈夫かどうかを確認することにしたのでReact.class
、変更可能な状態が親にあり、中間のみがコールバックを子に渡して操作する 3 つを作成しました。
基本構造:
私が使用できるよりも注意してくださいtransferThisProp
。実際には、これを「手動で」作成することを好みました。
FriendBox render には以下が含まれます:
Friend render には以下が含まれます:
コードを実行すると、次のメッセージが表示されます。
興味深い点は、chrome の react 拡張機能を使用すると、仮想DOM
が適切でバインディングが適切であることを確認できることです。Friend
最初の要素の子コンポーネントが言うことを除いて、すべてがうまく見えます_lifeCycleState: "UNMOUNTED"
これは、一番下の子がレンダリングされずにマウントされていないという間違いをしているよりも考えさせられました。すべてのコードが失敗しますが、正確な理由はわかりません。要素が自動的にマウントされない理由と、それを修正するにはどうすればよいですか?
完全なコード: http://jsfiddle.net/RvjeQ/
reactjs - 現在のコンポーネントの状態を、react で可能な別の外部メソッドにパラメータとして送信しています
ボタンをクリックすると、サブメソッドに移動する必要があります..代わりに、サブメソッドはすべての状態変化に応答し、最後にボタンを押すとデフォルトのhandleSubmitメソッドに移動します..ヘルプ!!
javascript - React (Facebook): 制御されたチェックボックスの管理状態
Reactを使用して、他の個々のチェックボックスを選択および選択解除する (すべて選択/選択解除する) チェックボックスを作成しようとすると、少し問題が発生します。http://facebook.github.io/react/docs/forms.htmlを読み、制御された sと制御されていない s の間に違いがあることを発見しまし<input>
た。私のテストコードは次のとおりです。
「グローバルセレクター」は期待どおりに機能します。選択すると、他のすべてのチェックが選択されます。問題は__changeSelection()
、他のチェックボックスのいずれかがクリックされたときにハンドラーが起動されないことです。
この作業を行うための適切な方法が何であるかわかりません。React モデルは、この種の相互作用をモデル化するのに最適なモデルではないのでしょうか? どうすればよいですか?
前もって感謝します
javascript - テーブルから行を削除すると TypeError になります
ReactJS HTML テーブル コンポーネントがあり、そのコンテンツ (セル値) をsetState
メソッドで更新します。基本的なコードは次のとおりです。
次のように使用します。
これはほとんどの場合機能しています。これを行うことでデータを変更できます(関数のどこかなど):
ご覧のとおり、テーブルの最後に 1 行追加されます。ただし、この更新後に初期データを設定しようとした場合、または何らかの方法でより小さい配列に設定して行数を短縮した場合 (たとえば、最後の行を削除する必要があります):data
[[1, 2, 3], [4, 5, 6]]
次のエラーが表示されます。
TypeError: updatedChildren[j] is undefined updatedChildren[j].parentNode.removeChild(updatedChildren[j]);
それはどこから来たのですか?
javascript - React.js: データが入力されない
React.js Web サイトでチュートリアルを行っています。これが私のコードです:
コメントを追加しても、コメント リストに表示されません。コメント配列の長さをコンソールに記録していますが、変更されることはありません。私は何を間違っていますか?
javascript - React.js ノードのアンマウント
React.jsノードをアンマウントしようとしていますthis._rootNodeID
しかし、それは戻りますfalse
。
要素をクリックするhandleClick
と起動し、ルートノードをアンマウントする必要があります。ドキュメントはunmountComponentAtNode
こちら
私もこれを試しました:
React.unmountComponentAtNode($('*[data-reactid="'+this._rootNodeID+'"]')[0])
そのセレクターは で機能しますjQuery.hide()
が、アンマウントでは機能しませんが、ドキュメントには、DOMElement
使用するようにである必要があると記載されていますReact.renderComponent
さらにいくつかのテストを行った後、一部の要素/セレクターで機能することが判明しました。
セレクターで何とか動作します:document.getElementById('maindiv')
ここで、maindiv
は React.js で生成されていない要素であり、単なる html です。その後、戻りますtrue
。
しかし、React.js で生成された別の ElementById を選択しようとするとすぐに false が返されます。また、document.body
どちらでも機能しませんが、console.log にすると基本的に同じものを返します (getElementsByClassName('bla')[0]
これも機能しません) 。
this
jQueryや他のセレクターに頼ることなく、ノードを選択する簡単な方法があるはずです..
javascript - React JSX で引用符内の props にアクセスする
JSX ではprops
、引用符で囲まれた属性値内からどのように値を参照しますか?
例えば:
結果の HTML 出力は次のとおりです。