問題タブ [react-dom]

これは、Google Adsense アプリケーション ページの例です。メインページが表示される前に表示された読み込み画面。

Reactコンポーネントでレンダリングされたロード画面を作成すると、DOMがレンダリングされるのを待つ必要があるため、ページのロード中に表示されないため、Reactで同じことを行う方法がわかりません。

更新日:

index.htmlスクリーンローダーを入れて、ReactcomponentDidMount()ライフサイクルメソッドで削除することで、私のアプローチの例を作りました。

例とreact-loading-screen。

次のコードがあります。

後でコードで使用する必要がありpriceCalculatorますが、ESLint は の戻り値を使用すべきではないと不平を言っていますReactDOM.render()。そのとき、コールバックである3 番目の引数を渡すことができることを発見しました。ReactDOM.render()すごい…と思いました。

しかしpriceCalculator、未定義です。デバッガーで例外を一時停止し、thisこの関数内にいるときに React コンポーネントに設定されていることを確認します。なので書き直し…

まだ未定義です。どうしたの？

Webpack を使用して es6 React コードをコンパイルしています (babel を使用)。

アプリケーションに React と Redux を使用しています。コンポーネントの位置が更新されない同じタイプの質問をドラッグすると、動的フォームがあります。ドラッグにはJqueryUI Sortableを使用しています

私の質問オブジェクト:

React コンポーネント

質問タイトル コンポーネント

質問のタイトルのテキストを変更すると、状態が更新され、タイトルが変更されます。質問を 2 から 1 にドラッグすると、質問配列も更新されます。

質問 2 は同じ位置に残ります。これは、同じタイプの質問 (テキストなど) をドラッグすると発生しました。質問のタイプは質問オブジェクトで定義されます。

上記ノードのデータ属性値の値を取得する方法。

node.js で ES6 を許可するために require('babel-register') を使用し、反応コンポーネントのサーバー側レンダリングを行っています。

このトークでは (7:14頃から) https://youtu.be/PnpfGy7q96U?t=7m14s

React Server Side Rendering のパフォーマンスを 30% 以上高速化するための主な推奨事項の 1 つは、ReactDOMServer をビルドのクライアント側バージョンにポイントすることです。

例えば ​​var ReactDOMServer = require('react-dom/server') の代わりに var ReactDOMServer = require('react/dist/react.min') を使用します

速度が向上した理由は、クライアント側のバージョンでは、高価な操作であることが判明した process.env.NODE_ENV へのチェックが回避されるためです。

このトリックは以前はうまく機能しているように見えましたが、React 15 では、クライアント側のコードは renderToString と renderToStaticMarkup のメソッドを直接公開しなくなりました。代わりに、恐ろしい外観のプロパティ __SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED の背後に隠されています。

したがって、次のようなことができます var ReactDOMServer = require('react/dist/react.min').__SECRET_DOM_SERVER_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

しかし、明らかにこれは良い考えではないようです (おそらく、React の将来のバージョンとの前方互換性はありません)。

require('react/dom-server/dist/react-dom-server.min') を試しましたが、これは「未定義」を返します(ラッパーコードはサーバーではなくクライアントで実行されることを意図していると思います)。

このパフォーマンスの向上を達成するための、より認可された他の提案はありますか?

参考までに、元の問題はここに記載されていますが、問題は解決されたようです: https://github.com/facebook/react/issues/812

私は単純なモーダルを持っています:

私の唯一の目的は、カスタム属性（残念ながら、サードパーティによって定義されているため、 data- または aria- で開始することはできません）をdiv参照先に挿入することですref="test"

カスタム属性を挿入しようとすると:

ここで要素は常に未定義であるため、setAttribute失敗しました。要素を検査すると、 !ref="test"には存在しません。<div>この参照がモーダル内にない理由について、誰かが私を助けることができますか?

これは私の以前の質問へのフォローアップの質問です（ただし、独立した質問です）

Mac に react と react-dom をインストールしようとしています:

ただし、次の警告が表示されます (パス名は に置き換えられます...)。

少し調べてみましたが、これらの警告の正当な理由は見つかりませんでした。これらのようなSO投稿は、ノードモジュールがインストールされているのと同じディレクトリに反応をインストールすることを提案しているようです。ノードがインストールされてusr/local/binいますがpackage.json、グローバル検索でもマシンのどこにも表示されません。反応をインストールする前に npm をインストールしたばかりなので、バージョン管理の問題ではないと思います。

私の目標は、webpack を使用して ES6 で作成された反応コンポーネント ライブラリのモジュールを作成することです。

私は使っている：

• webpack: "2.1.0-beta.25"
• 反応：「15.4.1」

reactおよびを peerDependencies として割り当てる必要があるreact-domため、開発者によってダウンロードされません。

これは私の関連部分ですpackage.json：

https://webpack.github.io/docs/configuration.html#externalsおよびhttps://webpack.github.io/docs/library-and-externals.htmlによると、

次の構成を試しました：

1.

2. 外部: { 反応: 'react', 'react-dom' : 'react-dom', }

3.

4.

5.

私はいつもこのエラーがあります:

だから、ドキュメンテーションはそれについてあまり明確ではないのだろうか。

2017 年 12 月、最大で 2018 年 1 月、どうすれば同梱からReact除外できますか?ReactDOM