JSX Transformer Causes Errors

When I convert my react files using the converter from react-tools

Or when I convert with grunt-react

My production file breaks because the conversion uses React.createElement and the error says that this function is undefined.

converts to:

instead of:

The live converter works fine because it uses React.DOM.h1(null, this.state.title). This line of code works well with react, but the React.createElement() function does not work and is not found.

How can I force my auto converter, either JSX or grunt, to convert to React.DOM.h1(null) instead of React.createElement(h1, null). Why does the converter use this function?

複数のreactjs.jsxファイルを1.jsつのステップで1つのファイルにコンパイルする方法はありますか?

何かのようなもの：

jsxtool compile ./src/*.jsx --out app.js

ありがとう。

JQueryで簡単にできることをReach JSXでやろうとしていますが、JSXではわかりません。例を可能な限り単純化したところ、問題は次のようになりました。

私は多くのタブヘッダーをレンダリングしています.最初のタブを特定のクラス名でレンダリングして、スタイルを変えて別の外観にすることができます(デフォルトで選択されたタブ)。

私のHtmlは次のようになります：

私のJSXは次のようになります：

「selected」や「active」など、最初のテーブルにクラス名を付けたいのですが、その方法がわかりません。

誰でも助けてもらえますか？

この単純な 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は大歓迎です。