問題タブ [react-rails]
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.
coffeescript - gem react-rails、私のコーヒースタイルの何が問題になっていますか?
私が反応を試みたのは初めてです。そして、私は何が起こっているのか理解していません.. :)
持っている:
私の見解では:
そして、私が持っているページを開くと:
しかし、私の期待は次のとおりです。
このブロックの何が問題になっていますか?
react-rails - 依存関係として反応するパッケージで反応レールを使用する
私は遊んでいてrails-react
、それはうまくいきます。最近、react-dropzoneライブラリを に追加しましたpackage.json
。
を実行すると、次のエラーが表示されますnpm install
。
npm WARN EPEERINVALID react-dropzone@3.2.2 requires a peer of react@^0.14.0 but none was installed.
明示的に追加するreact
と、すべてが正常にインストールされます。
ただし、ブラウザにアクセスすると、次のエラーが表示されます。
react-rails (1.5.0)
と_"react-dropzone": "^3.2.2"
react-router - react-router-relay と react-rails を使用したサーバー側のレンダリング
私のサーバー側は Rails で、サーバー側のレンダリング (prerender: true) で react-rails を使用しています。最近、react-router-relay でリレーを使用し始めましたが、サーバー側のレンダリングはできなくなりました。データのフェッチには、サーバーのレンダリング時には使用できないタイムアウトなどを含むグラフql サーバーとの通信が含まれているようです。したがって、graphqlの呼び出しを避けるために、サーバー側のリレーストアにデータを事前に注入する方法が必要だと思います. このライブラリを見つけました: https://github.com/denvned/isomorphic-relay-router、しかし、react-rails の使用と互換性がないため、使用できません (たとえば、どこにも app.get がありません)。私のアプリなので、そこに記載されている一致機能を使用する場所はありません)。これを機能させる方法について何か考えはありますか?
html - 値プロパティでレンダリングすると、入力フィールドはキーボードイベントを受け取りませんか?
ReactJS for Rails を操作するために、react-rails gem を使用しています。奇妙なことに、React コンポーネントをレンダリングするときに空でない値のプロパティを設定すると、入力フィールドはキーボード イベントを受け取りません。
これはうまくいきません!
しかし、それは動作します
アイデアはありますか?どうもありがとう!
javascript - 単体テストの実行中に React をグローバルとして追加するにはどうすればよいですか?
私の Rails プロジェクトでは、次のことを行う react-rails gem を使用しています。
これは非常に便利ですが、Jest を使用して単体テストを実行すると、そのグローバルが存在せず、テストしているコンポーネントを含むファイルから、React が定義されていないというエラーが表示されます。
を使用してコンポーネントファイルでReactを定義すると
次に、React を 2 回ロードするためにエラーが発生します。
React
単体テストでグローバル変数を定義して機能させるにはどうすればよいですか?
ruby-on-rails - Coffeescript を使用した React-Rails アニメーション
Coffeescript を使用して RoR アプリで ReactJS アニメーションを使用するソリューションを探していました。
私はこれを試しました(assets/javascript/components/sidebar/teams_form.js.jsx.coffee):
Chrome の開発者ツール (React タブ) には、次のように表示されます: Chrome 開発者ツールのスクリーンショット
これが私のSASSコードです( assets/stylesheets/partials/_sidebar.sass ):
結果のコードは何もアニメーション化しません。背景色のない単純なレンダリングを行います。私は何年もの間解決策を探していました!
(TeamForm は、要素を作成し、ID によって指定された div に追加するリンクをクリックした後にレンダリングされます)
誰かが私を助けることができれば、それは素晴らしいことです!!
どうもありがとう。
編集:jQueryでonClickクラスを追加/削除するだけで問題を回避できました。しかし、それは正しい解決策ではないようです。私はまだこれらのアニメーションがどのように機能するかを知りたいと思っています。