問題タブ [react-dnd]

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.

0 投票する
1 に答える
1264 参照

reactjs - ドラッグ時にReactDnDソート要素が更新されない

こんにちは、この例のこのコードに従って、同様のコンポーネントを作成しています。私のコンポーネントは期待どおりに動作しています (ドラッグ アンド ドロップすると正しくソートされます) が、カードをドラッグしているとき、不透明度 0 は、ReactDnD の例のように動作している要素を「感じる」ためにドラッグ要素に従う必要があります。

私の作品を見る

そして私のコード

0 投票する
1 に答える
95 参照

javascript - 子の状態を親に持ち上げて、小道具として送り返すにはどうすればよいですか?

私は react-dnd を使用しており、その内部関数のほとんどがcomponentパラメーターとして使用されるため、その関数内のコンポーネントのサイズと内容を決定できます。Componentのようなことができるように、コンポーネント自体への参照を提供しますgetDOMNode(component).getWhatever()

ただし、関数canDropは残念ながらこのパラメーターを受け取りません。コンポーネントパラメータを使用してcanDrop関数内の位置を決定しようとしています。コンポーネントパラメータを使用できないため、ドキュメントが推奨しています:

component: 指定すると、コンポーネントのインスタンスになります。これを使用して、位置またはサイズの測定のために基礎となる DOM ノードにアクセスしたり、setState やその他のコンポーネント メソッドを呼び出したりします。インスタンスが呼び出されるまでに使用できない可能性があるため、意図的に canDrop から欠落しています。このメソッドをコンポーネントの状態に依存させたい場合は、props だけを使用できるように、状態を親コンポーネントに持ち上げることを検討してください。一般に、可能な限り props に依存すると、コードはよりクリーンになります。

コンポーネント自体を親に持ち上げて、それを小道具としてそれ自体に戻す方法がわかりません。このようなことが起こっている例を教えてください。

0 投票する
0 に答える
1749 参照

reactjs - react/lib/update - 複数のスプライス、複数のインデックス

で作業し、 react ('react/lib/update')react-dndのユーティリティを使用している間、以下のような構造で:update

state = { data : { items : [] /* array of 'fields' (flat objects items), and 'groups' (object that may have nested 'fields' under 'group.nested') */ } }

配列からグループ (オブジェクト内の配列)updateに移動しようとすると、ユーティリティに問題があることに気付きました。fielditemsnestedgroup

フィールドを(でsplice)削除してから、ネストされた配列に追加しようとしました。このupdate関数の結果は、フィールドが内部にネストされたグループを返しましたが、そのフィールドは宣言された元の位置から削除されていません$splice

以下に、問題の詳細な例を含むRunKitを見つけることができます

https://runkit.com/592da/splice-react-update-issue

アドバイス、またはより良い実践的な解決策を喜んで受け取ります。

ありがとう !

0 投票する
2 に答える
1154 参照

reactjs - 毎秒ブロックコンポーネントの再レンダリングに shouldComponentUpdate を使用する

そのゲームはreactとreduxで開発されました。私はreact-redux開発者ではありません(私は.net開発者です)が、私はそのプロジェクトを継続しなければならないので、私はreactとreduxに慣れていません.そのゲームのパフォーマンスは、一部のAndroid携帯ではあまりにも悪いです.だから私は分析しますproject.コンポーネントのrenderメソッドが毎秒機能していることがわかります.私のコンポーネントには30を超える他のコンポーネントが含まれています.したがって、毎秒再レンダリングされ、一部の古いAndroid携帯でパフォーマンスが低下します

React コンポーネントが毎秒再レンダリングされるのはなぜですか?これをブロックできますか? その問題を検索すると、解決策が shouldComponentUpdate 関数であることがわかります

しかし、この関数 nextstate では、この状態は同じです。nextProps.gameStore.get('state') と this.props.gameStore.get('state') は同じです。なぜ次の状態と現在の状態が同じなのですか?どうすればよいですか? do?私はコンストラクターを使用しますが、それでも同じですここではすべてのコンポーネントコードです

編集: Aftab Khan ディレクティブを使用して、コンポーネントを PureComponent に変更しましたが、ページが開かず、コンソールにエラーはありません

これを次のように変更します

それでもうまくいかないので、これに変更します

それでもブラウザで開かない