問題タブ [react-dom]

wepbackこのunexpected tokenエラーを使用してアプリをビルドしようとしています。私のプロジェクトのすべての依存関係は問題なく、最新です。別の場所で同じプロジェクトを使用しており、問題なくビルドされていますが、同じ現在のコードをビルドしようとするとエラーが発生します。以下は config.js とエラーの説明です。

ここに私のapp.jsxがあります

これが私のconfig.jsです

これは、ビルドしようとしたときに発生するエラーです。

私は、、を使用してreact v0.14.8いreact-dom v0.14.8ますbabel-loader ^6.2.1

私はいたるところを見てきましたが、これに対する解決策を見つけることができません。

私は単に次のことをしようとしています:

これは私にはかなり単純に思えます。私は持っている

動的appendChildコンポーネントも必要です。問題は、これに追加する「ステップ」は、<div>作成したコンポーネントの1つである必要があり、複数のコンポーネントの子を追加し、さらには複製できるようにする必要があるということです(それが私が使用している理由ですReact.cloneElement())コンポーネント。

すべての「ステップ」を追加したら、後のプロセスですべてのステップを解析して、レシピの実行方法を決定します。

以下は問題なく動作しますが、単純な DOM ノードを作成する必要はありません。既に構築したコンポーネントを使用して追加する必要があります。

しようとすると、次のエラーが表示されthis.steps.appendChild( component )ます。

エラー：

私の主な質問はこれだと思います: React コンポーネントを で使用できるノードに変換するにはどうすればよいthis.steps.appendChild()ですか?

OR:子コンポーネントを my に動的に追加する「React 方法」はありますthis.stepsか?

こんにちは、React js を学習していますが、問題に遭遇しました。反応ルーターを使用してメイン ページに戻ろうとすると、次のエラーが表示されます。

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

これが私のコードです。ご覧のとおり、ナビゲート関数を呼び出しています。

ルーターを使用した私のclient.js：

と交換this.props.router.push('/');するthis.props.history.push('/');とうまくいきます。何が問題なのですか？

Leafletを使用してアプリに取り組んでいます( react-leaflet経由)。Leaflet は DOM を直接操作します。react-leaflet ライブラリはそれを変更しません。React フレンドリーな方法で Leaflet マップを制御するために使用できる React コンポーネントを提供するだけです。

このアプリでは、いくつかの単純な要素を含む div であるカスタム マップ マーカーを使用したいと考えています。Leaflet でこれを行う方法は、マーカーのiconプロパティをDivIconに設定することです。これにより、カスタム HTML を設定できます。DivIcon のhtmlプロパティを HTML を含む文字列に設定することで、その内部 HTML を設定します。私の場合、その HTML を React コンポーネントからレンダリングしたいと考えています。

そのためにはReactDOMServer.renderToString()、マップ マーカー内に必要なコンポーネントを文字列にレンダリングし、それをhtmlDivIcon のプロパティとして設定するのが正しい方法のようです。

MyMarker.js:

ただし、React docsによると：

この [renderToString] は、サーバー上でのみ使用する必要があります。

これは厳密なルールですか、それとも ReactDOM の DOM の効率的な管理を回避することを思いとどまらせることだけを意図したものですか?

私が求めていることを達成するための別の (より良い) 方法は考えられません。コメントやアイデアは大歓迎です。

人を表すデータの配列を含むjsonファイルがあります。

1人1台の部品を作りたい。コンポーネントを作成し、render 関数内でデータをループする必要がありますか?それとも、ReactDOM.render 関数の外でループして、ループごとに特定のデータを渡す必要がありますか?

私はこのようにする必要があります：

または、これを行う必要があります：

jQuery を使用すると、 onメソッドを介してイベント ハンドラー関数をアタッチできます。この関数は、DOM が変更され、ページの HTML が何か (Ajax 呼び出しなど) で置き換えられたときにもトリガーされます。

React コンポーネントで同様のことを行うことは可能ですか? DOM を変更する ajax 呼び出しの後、特定の要素classが見つかった場合は、それをレンダリングします ( を使用ReactDOM.render(...))。

ありがとう

Meteor-React チュートリアルを実行して、ステップ 3 で行き詰まった Meteor/React 初心者です。私の問題は、データがデータベースに存在するにもかかわらず、ブラウザに表示されないことです。

これが私の imports/ui/App.jsx です:

コンソールにエラーは表示されません。

基本的this.props.tasksに空の配列を返します。しかしdb.tasks.find({})、コンソールにはレコードが表示されます。あまり変更せずに、Tasks レコードをハードコードすると問題なく表示されるので、問題は Task コンポーネントにはありません。誰でもここで助けることができますか？よろしくお願いします。

クライアント/main.jsx:

パッケージ.json:

npm バージョン3.3.12 ノード バージョン5.6.0

これについてすでに多くの質問があることは知っていますが、どれも私の問題に一致していないようです。

次のようにReact コンポーネントを作成してJQuery-UI dialog います。

これを含めるための私のejsファイルにjquery

インクルードは機能しますが、ダイアログを開くボタンをクリックすると、コンソールdialog is not a functionに書き込むとコンソールに表示されます。

私を助けてくれる人はいますか？

注: Bower、Gulp、React、ReactDom、jqueryを使用していますjquery-ui

別のコンポーネントからコンポーネントを呼び出して html を表示しようとしていますが、コンポーネントを単独で呼び出すと機能しますが、同じ return 関数内にさらにマークアップを追加すると、次のエラーがスローされます。

製品.jsx

ProductSlider.jsx (動作)

ProductSlider.jsx (動作しません)

このコードの何が問題なのか誰か知っていますか?