問題タブ [react-jsx]

最近Reactを調べていて、JSXとtypescriptを使いたいと思っていました。これに関するリソースやReactの型定義を見つけることができませんでした。

JSX で Typescript を使用できますか?また、型定義は利用できますか?

RactiveJS は JSX と互換性がありますか?

マークアップの一部は互換性がないと推測しています。厳密な型付けと、JavaScript ソースでテンプレートをきれいに記述できる点が気に入っています。多分これは悪い設計と見なされますか？

jsx をコンポーネントのレンダリング関数から別のファイルに移動する方法はありますか? もしそうなら、レンダリング関数でjsxを参照するにはどうすればよいですか?

私はFacebook の React チュートリアル http://facebook.github.io/react/docs/getting-started.htmlを大まかにフォローしていますが、別の html ファイルに適用しています。

これは、react スターター キットに基づく私の html ファイルです。

「jsx --watch src/build/」を実行すると、react-toolsをインストールしました

このスニペットを変換しています：

このスニペットに：

ただし、チュートリアルには次のスニペットが示されています。

小文字の 'r' が原因で、Web ページは「react が定義されていません」というエラーをスローします。これは本当です。クロムのコンソールから、「react」ではなく「React」が定義されていることを確認できます。

チュートリアルで説明されているように、jsx で正しい出力を作成するにはどうすればよいですか?

li 要素から ul リストを作成したいのですが、li 要素はさまざまなソースから取得されるため、1 つのステートメントでは実行できません。JSX は一連の子要素を処理できないようです。これにより、構文エラーが発生します。

理想的には、次のようなことをしたい:

これを達成する別の方法はありますか？

現在、私は JavaScript プログラミング (React フレームワーク) に PhpStorm を使用しています。React には、HTML を JavaScript コードに挿入できる JSX と呼ばれる特別な構文糖衣が追加されています。しかし、特定のJSXを挿入するとphpstormが間違ってしまうため、Enterキーを押して次の行に移動すると、常に不要な{. この動作を抑制する方法はありますか?

propsReact/JSX で同じ値に複数回アクセスする場合、オブジェクトをローカル変数にキャッシュすることをお勧めしますか?

React を使い始めたばかりで、React コンポーネントを使用して既存の HTML 出力を再作成しようとしています。

これがバグなのか、何か間違ったことをしているのかはわかりませんが、最終的な HTML 出力は期待したものではありません。

問題は、タブ アンカー テキストをスパンでラップするべきではなく、次の番号のみでラップする必要があることです。

このJSXから始めます：

次の JS にコンパイルされます。

これは、次の HTML としてレンダリングされます。

javascript はスパンをアンカーの子として明確に示しているので、おそらくバグだと思いますが、何か間違ったことをしていないことを確認したかったのです。