問題タブ [react-jsx]

この単純な JSX の例を見ると、次のようになります。

「DOM部分」を変更するにはどうすればよいですか：

...送信する変数に基づいて動的に？

別の JavaScript ファイルを使用して React JS JSX を配置しています。ドキュメントで示されている例を使用すると、大量の Visual Studio 警告と醜い波線が表示されます。

私はこれを回避する方法を理解できません.. React JSのかなりの取引ブレーカーです。

モジュールのネイティブCommonJSサポートがある環境で新しいプロジェクトを開始しています。これはアトムシェル プロジェクトであり、Browserify や webpack AFAIK などの事前コンパイル手順を使用する可能性はありません。require

app.jsxmy で宣言されているエントリポイント ファイルでJSX を使用できます。これは、以前に宣言されてindex.htmlいるためです。JSXTransformer

モジュール内で CommonJS モジュールとしてインポートされるサブモジュールに JSX 構文を使用できるようにしたいと考えていapp.jsxます。

私が理解している限りでは、JSX 構文を削除し、.NET 経由でロードされるすべてのモジュールのバニラ構文を使用することを余儀なくされますrequire。この状況でまだ JSX を使用する代替手段はありますか?

ReactJSで次のようなことをしようとしています:

問題は、コードを実行すると次のエラーが発生することです。「モジュールのビルドに失敗しました: エラー: 解析エラー: 5 行目: 予期しないトークン -」 どうやら、React はfont-sizeダッシュが含まれているのが好きではありません。どうすればこれを回避できますか? 反応のためにその文字をエスケープする方法はありますか? 同じことをする、好きなように反応するいくつかの異なる css プロパティはありますか?

ありがとう！

おそらく簡単なjsxの質問があるので、私の愚かさを許してください。

React の jsx コマンドライン コンパイラで遊んでいます。次のような非常に単純な JSX ファイルがあります。

コマンドラインに次のように入力すると、コンパイルされます (コンソールに結果が表示されます)。jsx test.jsx

このファイルを に出力したいtest.js。しかし、コマンドを実行してjsx test.jsx test.jsも何も起こりません。コマンドのヘルプ情報のみが出力されますjsx。

何か案は？明らかにすべきだと思います。

現在、Jest テストを React アプリケーションに追加しようとしています (ここにあります)。

ただし、次のテストを実行すると、

次のエラーが表示されます。

私のアプリとCategoryPageコンポーネントの両方が、react-router を明確に使用しています。CategoryPage には、認証に react-router を使用する mixin が含まれています。私自身のデバッグに基づいて、JestmakeHrefがナビゲーション用の react-router の組み込みメソッドの 1 つである を呼び出そうとすると、エラーが発生することがわかりました。

これを修正するために、最初に を呼び出してみjest.dontMock('react-router')ましたが、効果はありませんでした。問題は、 をモックしないことによってCategoryPage、 jest がそのすべての依存関係をモックなしで自動的かつ不可逆的にインクルードすることです。

この問題の解決が非常に難しい理由の 1 つは、React で Jest を使用しているほとんどの人がコンポーネントをテストしていないように見えるためです。これは、テストに重点を置いていないか、Flux を使用してストア、ディスパッチャーなどのテストのみを行っているためです。まだ Flux を使用していないため、これはオプションではありませんが、将来的に移行する必要があるかもしれません。

編集 1: を削除するとjest.dontMock('../js/components/CategoryPage.jsx')テストに合格しますが、そのコンポーネントの機能を実際にテストすることはできません。

編集2:除外するjest.dontMock('jquery')と、モーダルの作成に使用するミックスインに関連する別のエラーが発生します:

EDIT 3:バグをreact-routerのNavigation mixinに分離したように見えますthis.context.makeHref。React チームはthis.contextバージョン .9 以降非推奨になっているため、これが問題の原因である可能性があると思います。したがって、回避策または修正this.contextは大歓迎です。

OSX では、Sublime Text 3 (ビルド 3065) で、構文を asJavaScript(JSX)または justJSXに設定して、通常の cmd+/を押して、選択したテキストをコメントアウトします。

ただし、次のように選択範囲をラップする場合、ST3 はデフォルトで//コメント文字になります。

{/* foobar selected text */}

私はここを見ていますが、何を編集すればよいかわかりません:

/Users/admin/Library/Application Support/Sublime Text 3/Packages/User/JavaScript (JSX).tmLanguage

前もって感謝します！:)

私は、既存の Web アプリをノックアウトから反応 js に移行する実験を行っています。

現状では、アプリケーションはサーバーへの websocket 接続を確立し、非同期で更新を受信します (たとえば、チャット ルームのように、お互いの状態に影響を与える可能性のあるクライアントが多数存在する可能性があります)。

私の質問は、もし私がレンダリング サーバー側で行った場合、どのように変更を各クライアントにプッシュできるのでしょうか? サーバーでのレンダリングについて読み始めたばかりなので、それがどのように機能するかを誤解しているかもしれませんが、私が信じている方法は次のとおりです。

クライアントはサーバーに送信されるアクションを実行し、サーバーはクライアントがDOMに置き換えるhtmlフラグメントで応答します

サーバーまたは別のクライアントによって状態を変更できるアプリの場合、これらの更新を表示するために websockets/http ポーリングを使用する必要がありますか?

それ以外の場合、サーバーが新しいフラグメントをプッシュすることは可能ですか?

私は自分の jsx で次のようなことをしていることがよくあります。

オブジェクト内のすべてのキーと値のペアを要素への小道具として渡すことを可能にするインフラストラクチャは提供されていますか? オブジェクト全体を渡すことができることは承知していますが、 を参照する必要があるため、特に渡す唯一のものである場合は、最大限にエレガントに感じられませんthis.props.myObject.key1。

React コンポーネントがAvatarあり、プロファイルにリンクするかどうかを選択できます。たとえば、ユーザー プロファイルでカスタムを行いたい場合は、プロファイルにリンクさせたくない場合がありますclickHandler。リンク以外の if と else で基本的に同一の HTML を使用して if/else を実行する以外に、より良い方法はありますか? 以下は、私が言いたいことの例を示すための疑似レンダリング コードです。