問題タブ [react-dom]

React 入力コンポーネントを拡張しようとしています。これはパスワードを入力する必要があり、要素またはその隣の要素で特定のイベントが発生した後、入力のタイプを切り替える必要があります (type="text/password")。

これはReactでどのように処理できますか?

コンポーネントのクラスとしてこれを持っています：

編集 render メソッドを編集し、イベントを処理する関数を追加しましたが、次のようになりました。

警告: setState(...): 既存の状態遷移中 ( 内などrender) に更新できません。Render メソッドは props と state の純粋な関数であるべきです。

そしてブラウザがクラッシュします。

.....

.....

質問：

反応コンポーネントのメソッドを他の場所に公開するにはどうすればよいですか?

たとえば、React 外の要素から React-Router の this.context.router.push(location) を呼び出したいとします。

おそらく、ウィンドウ オブジェクトに React コンポーネントのメソッドを追加して、任意の汎用 DOM イベント リスナーやコンソールからでも呼び出せるようにすることはできますか?

背景/ユースケース:

React エコシステムではまだ利用できない多くのプラグインと構成を提供するため、React アプリで jQuery DataTables を使用したいと考えています。

既存の React データ テーブル コンポーネント (以下の実装) から始めました。

オリジナルは、たとえば、セル内の他の React コンポーネントをレンダリングできる render 関数を渡すための優れたオプションを提供します。以下では、「製品名」列のセルが React-Router < Link /> コンポーネントとしてレンダリングされます。

既存のコンポーネントを変更するために行ったことは、React の DOM 差分アルゴリズムからテーブルを非表示にすることです。そうしないと、jQuery DataTables が DOM を変更したときに壊れてしまうからです。

1. コンポーネントのrender()コードをクラスのカスタム メソッドgetDtMarkup()に移動します (react ライフサイクル外)。

2. render()はrefとidを持つ空の div を出力するようになりました

   /li>

3. componentDidMount は ReactDomServer.renderToStaticMarkup を使用して、React コンポーネントを単純な非反応マークアップに変換し、これを render() から #dtContainer div に追加します。最後に、jQuery DataTables はレンダリングされたテーブル html を派手な「jQuery DataTable」として初期化します。

   /li>

ソースhttps://github.com/alecperkey/react-jquery-datatables/blob/master/src/Table.js#L89-L111

この質問をしている制限は、この静的な非 React マークアップ内で < Link /> などの React コンポーネントを使用できないことです。今のところ < a href=""> を使用していますが、これによりページがリロードされ、速度が遅くなり、ブラウザが白く点滅します。

これが慣用的な React ではないことはわかっていますが、レンダリング前とレンダリング後の両方でダウンストリームの仮想 DOM の変更を通知する必要がある React コンポーネント (逆スクロールビュー) に取り組んでいます。

これを説明するのは少し難しいので、出発点である JSFiddle を作成しました: https://jsfiddle.net/7hwtxdap/2/

私の目標は、ログを次のようにすることです。

React が DOM の変更をバッチ処理することがあることは承知していますが、それで問題ありません (つまり、ログ イベントはbefore update; rendered big; rendered big; after update; ....

https://jsfiddle.net/7hwtxdap/4/で行うように、コールバックを指定することで手動で動作を近似できます。ただし、このアプローチはスケーリングしません。たとえば、子ではなく子孫からイベントをバブリングさせる必要があります。私が使用するすべてのコンポーネントにこれらの種類のイベント ハンドラーを追加する必要はありません。

使用事例：

メッセージ用の「逆スクロール コンポーネント」の作成に取り組んでいます (新しい要素が追加されたり、既存の要素のサイズが変更されたりすると、スクロール変更の基準は、すべてのメッセージング アプリの上部 ala ではなく、コンテンツの下部になります)。動的に変更された子があります (クラスに似てい<MyElement />ますが、高さが可変で、ajax からのデータなどがあります)。これらは、Flux のような状態ストアからデータを取得するのではなく、pub-sub データ同期モデルを使用しています (setTimeout() でかなりうまく近似されています)。

逆スクロールを機能させるには、次のようにする必要があります。

この設計にとって重要なのは、「反転スクロール対応」ではない他の要素の周りに要素をラップできるようにすることです (つまり、反転スクロール ハンドラーに変更されたことを通知する特別なコードは必要ありません)。

指定したルート通りにマイページが回らない。私のファイルはそのままです。現在、私のHome.jsとMain.jsはうまく機能しています。しかし、 playerOneにルーティングしようとしても、何も起こりません。すなわち。ページは変更なしで同じままです。

私は反応するのがまったく初めてで、学ぼうとしています。どこで間違えたのかわからない。誰かが私を助けてくれませんか?? 前もって感謝します。

Routes.js

PrompContainer.js

Main.js

ホーム.js

index.js

私のエントリ ポイントはindex.jsファイルです。私のディレクトリ構造は次のようなものです-

私のpackage.jsonファイルは -

私のWebpack構成は

ReactJS で「チェック済み」の子のプロパティのブール値にアクセスしたいと考えています。これで、次の render メソッドができました。

クラス LoginCard.js

checkedcomponentの bool 値を取得したいRememberMe。の render メソッドを次に示しますRememberMe。

クラス RememberMe.js

コンポーネントCheckboxはMaterial UIからのもので、 のプロパティがありcheckedます。var isRemMeChked = ReactDOM.findDOMNode(this.refs.RemMeChk.refs.rm).checked;クラス LoginCard 内で bool 値にアクセスしようとしましたが、未定義です。ブール値にアクセスする適切な方法は何ですか?

モバイル デバイス用の長いナビゲーション バーを作成しようとしていますが、アコーディオン スタイルで開発しています。最初のビューには、現在アクティブなリンク名があります。ユーザーがこのアクティブなリンク名をクリックすると、下に展開され、他の使用可能なリンクが一覧表示されます。

コード サンプルでは、​​「HEADER」の代わりに現在アクティブなリンク (PATH1 または PATH2) を取得しようとしています。

私が調べるべきことについて何か提案やアドバイスはありますか?