汎用コンポーネントReactJS

Question

私にとって非常に重要なことについて質問があります。 ReactJSを使用するユニバーサルコンポーネントを実装する方法。たとえば、私は自分のウェブサイトのすべてのページに表示されるファイルアップローダーを持っています（メインアプリケーションのラッパーの中に常にレンダリングします）。しかし、問題は、アップローダの一部の小道具（新しい情報を追加する）を変更したいときです。アップローダの小道具を変更するためにメインラッパーとその機能を取得するには、あまりにも多くのコンポーネントを使用する必要があります。だから、私はこのアップローダに10か所以上から電話をかけなければならないと信じられません。私はそれをより簡単にするための解決策がなければならないと確信しています。 だから...どんなアイデア？

Answer 1

これは、コードベースがより複雑になる場合、反応構造に付随する課題です。このほとんどの人はReduxとMobxを使って店を作る。

ストアは親コンポーネントの代わりに状態を保持し、アプリ内のどこからでもインポートおよび変更できます。

私はReduxのよりそのよりシンプルMobxを、使用

、あなたはここで情報を見つけることができます：https://mobx.js.org/best/store.html

使用はこのようなものになるだろう：

import {observer} from 'mobx-react' 
import store from './store' 

const SomeComponent = observer(()=> 
    <div> 
     <button onClick={store.changeSomeState}> 
      Toggle some text 
     </button> 
     { 
      store.someState && 
       <p>some text</p> 
     } 
    </div> 
); 

観察者が、それは店舗での状態変化に反応します。