問題タブ [react-jsx]

別のコンポーネントから構成される反応コンポーネントの最適な構造について質問があります。したがって、最初のものは次のとおりです。

ここでの問題は、ColorOption から ColorSelect 関数にアクセスできないことです。

そして2番目：

したがって、最初のものは次のとおりです。

ここでの問題は、ColorOption から ColorSelect 関数にアクセスできないことです。

そして2番目：

これらの例では、json 形式でプロパティを送信できるコンポーネントが必要なため、コンポーネントを再利用するのは簡単ではありません。

React のネストされたサイクルで何が間違っていますか? Google で情報を検索しましたが、適切なものが見つかりませんでした。私が間違っていると理解していることを見つけるのを手伝ってもらえますか?

図からわかるように、変数にデータがあります。そして、それはうまくいきます。しかし、 this 以外の値を追加すると<tr>、エラーが表示されます!

エラー (別の から追加された項目によって異なります<tr>):

キャッチされないエラー: 不変違反: findComponentRoot(..., .0.1.1.0.2.0.0.1.$0.$9.$109): >要素が見つかりません。これはおそらく、DOM が予期せず (ブラウザなどによって) 変更されたことを意味します。これは通常、テーブルを使用するときに a を忘れたため、n......` です。

Sublime/TextMate 言語ファイルでいくつかの構文強調表示の正規表現に取り組んでおり、非自己終了 html タグで「開始」し、それぞれの終了タグで終了する必要があります。

• 始める：(<)([a-zA-Z0-9:.]+)[^/>]*(>)

• 終わり： (</)(\2)([^>]*>)

これまでのところ、タグ名をキャプチャすることができ、タグ間の領域に適切なパターンを適用できるように一致しています。

現在、開始タグで 0 個以上の html 属性をキャプチャして、それらを強調表示できるようにすることも検討しています。

したがって、タグが<div attr="Something" data-attr="test" data-foo>

attr、data-attr、および 、および とdata-foo一致<する可能性があります。div

のようなもの (これは非常に大雑把です):

(<)([a-zA-Z0-9:.]+)(?:\s(?:([0-9a-zA-Z_-]*=?))\s?)*)[^/>]*(>)

完璧である必要はありません。構文の強調表示のためだけですが、ルックアラウンドなどを使用する必要があるかどうか、タグ内で複数のキャプチャ グループを実現する方法を理解するのに苦労していました。単一の式でも可能です。

編集：特定のケース/質問の詳細は次のとおりです-https: //github.com/reactjs/sublime-react/issues/18

開発サーバーの実行を開始する時点まで、ここの例に非常に大まかに従っています。

テスト用の React コンポーネントがあります (scripts/test.jsx 内):

ソースディレクトリに対してjsxローダーを使用しているwebpack.configがあります（ライブラリプロパティを追加していることを除いて、基本的に例と同じです）。

webpack を実行すると、期待どおりにバンドル ファイルが生成されますが、コンポーネントを html ファイルで使用しようとすると (bundle.js スクリプト参照を含めた後)、コンソールに次のメッセージが表示されます: " Uncaught ReferenceError: Test is not "と定義されています。

HTML には次のものが含まれます。

モジュールローダーを技術的に使用していないhtmlページに対してCommonJSスタイルで定義されたコンポーネントを使用するために何か間違ったことをしていますか?構造化モジュールローダーのタイプ)？

webpack の出力はこちらから入手できます

編集 2: 完全なサンプル コードは、github リポジトリとして入手できます。

リーフレット マップ コンポーネントを作成しています。これは plunker の例です

http://plnkr.co/edit/LkghwOcby49XESdGb782?p=preview

ここにコードがあります

リーフレット.jsx

map.html

I would like to try and call the modifyMap method directly from the browser console or from any script on the page. I have tried to use statics but I am unable to find the Object which contains the modifyMap method. Is there an easy way to find this method or is there a better way of doing this with Reactjs? I also know that this is possible if the React class was created on this page instead of using module.exports in a separate file, I am hoping there is another way! Please help!

React jsx ファイルは、ブラウザー内変換で正常に機能していました。
しかし、npm をインストールして react-tools をインストールし、変換コマンド ラインをで実行しjsx -watch source/ build/た後、新しく変換された JavaScript ファイルは正常に見えましたが、不完全な DOM ツリーしかレンダリングしませんでした。

どうすれば修正できますか？