問題タブ [react-jsx]

次のコンポーネント階層を検討してください。

これにより、HTMLUserComponentのノード内にレンダリングされます。#fund

HTMLUserComponentのノード内の特定のノードでレンダリングするにはどうすればよいですか? fund例えば：

マーカー付きのGoogleマップを表示しようとしています。React.js を使用しています。マップは正しい場所に表示されますが、マーカーが表示されず、ブラウザー コンソールに複数の「オブジェクトは拡張可能ではありません」というエラーが表示されます

コードは次のようになります

コンソールからの詳細なエラー:

キャッチされていない TypeError: プロパティ k を追加できません。オブジェクトは拡張可能ではありません VM3577:92

キャッチされていない TypeError: プロパティ onerror を追加できません。オブジェクトは拡張可能ではありません main.js:3

キャッチされていない TypeError: プロパティ k を追加できません。オブジェクトは拡張可能ではありません VM3577:92

キャッチされていない TypeError: 未定義の VM3577:69 のプロパティ 'style' を読み取ることができません

キャッチされていない TypeError: プロパティ onerror を追加できません。オブジェクトは拡張可能ではありません

現在、React JS / JSX を学習しようとしていて、簡単なログイン フォームの作成に行き詰まっています。

<button>タグを削除すると正常に動作しますが、それ以外の場合はエラーがスローされます。

Uncaught Error: Parse Error: Line 27: Unexpected identifier

<button onChange={this.logout}> Logout ... ^

フィドル: http://jsfiddle.net/4TpnG/90/

マスター/スレーブ チェックボックス システムを実装する方法に興味があります。私が現在取っているアプローチは、マスター/スレーブチェックボックス間に所有者/所有者 (親/子) の関係を持つことです。ただし、チェックボックスが代わりに兄弟である場合、React でこれを達成する方法があるかどうかに興味があります。独自のグローバル イベント システムを使用するように指示されているドキュメントを参照してください。誰かがこれが何を意味するのか説明/例を見せてもらえますか? ありがとう！

次のように、数行のhtmlを返す関数があります。

これを行うと、文字列はページ上にテキストとして表示されます。

<h3><span className="fa fa-fw fa-briefcase"></span><small>Visionary</small></h3><h3><span className="fa fa-fw fa-shopping-cart"></span><small>Active</small></h3><h3><span className="fa fa-fw fa-sitemap"></span><small>Lorem</small></h3><h3><span className="fa fa-fw fa-tasks"></span><small>Ipsum</small></h3><h3><span className="fa fa-fw fa-signal"></span><small>Dolor</small></h3><h3><span className="fa fa-fw fa-check-square"></span><small>Amet;</small></h3>

適切な HTML としてレンダリングするにはどうすればよいですか?

チャイルドがマウントされているかどうかを検出する方法はありますか? Isotope を初期化するとき、初期化のためにすべての子コンポーネントをマウントする必要があります。5 ミリ秒のタイムアウトで期待どおりに動作していますが、もっと良い方法があると確信しています。

アップデート

私は今これを試しました：

5ms後に高さを計算しましたか？それがアイソトープが機能しない理由です。それはバグですか、それとも正常ですか？ありがとう！

JSX スコープですぐに利用できるようにしたい複数の ReactJS クラスを返す RequireJS モジュールがあります。

例えば

これらを React/JSX で次のように使用できるようにしたいと思います (疑似コード):

すると、React はモジュール クラスを見つけられません。クラスをスコープに公開する場合にのみ機能します。

これどうやってするの？それらを現在のスコープに1つずつ抽出するか、グローバルスコープに抽出できることはわかっていますが、JSXから変更せずに使用できるはずです。ありがとう！

次のような関数を使用して、それらをグローバルスコープに公開できることを知っていることに注意してください。

可能であれば、名前空間に残しておきたいと思います。これは、StackOverflowでここで尋ねられているこの質問に似ていることに注意してください

ある要素が別の要素に変化するときに、その要素を移行したいと思います。

私は3つの例を持っています：

• 機能しますが、保管されているアイテムのリストを使用します（jsfiddle）
• 状態に応じて、機能せず、1 つのアイテムのみを保持するもの (jsfiddle)
• 両方のアイテムを保持し、それらを非表示/表示する、機能しない別のもの（非表示/表示を使用するjsfiddle）

私が望むのは、2 番目のもののようなものです。これは、機能する最初の試みの非常にわずかなバリエーションです。

オプション1：

オプション 2: 機能しないが、やりたいことに近い JSX (実際には、1 つのビューを非表示にし、別のビューを表示する)

オプション 3: 非表示/表示を使用して 2 つのビューを保持しますが、それでも機能しません。

簡単に言えば、あるメインの「コンポーネント」から別のメインの「コンポーネント」に切り替えるときにトランジションを実行するにはどうすればよいですか? オプション 1 が機能する理由がわかりませんが、オプション 2 は機能しません。