React.jsに動的にコンポーネントをロードする

状況 - Reactとuser \ 3rdパーティの組み込みコンポーネント（ウィジェット）を利用するapplication \ frameworkを作成したいと思います。私の現在の見解では、ロードされたサードパーティのコンポーネントをリストするルートコンポーネントがあるでしょう。React.jsに動的にコンポーネントをロードする

class Root { 
constructor(p){ 
    this.state = {loadedWidgets: [<Chat/>, <Mail/>, <Notes/>]} 
} 
render(){ 
    return(
    <div> 
    <Header/> 
    <Body> 
    {this.state.loadedWidgets.map(WidgetName => <WidgetName />)} 
    </Body> 
    </div> 
) 
} 
}

しかし、私は、私は理解したり、解決する方法を見つけることができない2つの大きな問題が発生しました：：私はハードコードいけない場合、私は（インポート）それらのウィジェットをロードする方法を

をそうと同様にそれらをルートコンポーネントに変換しますか？

（コードのリストエンド：リアクトは道本当のコンポーネントをレンダリングしないのはなぜ

（私は、ユーザーがウィジェットをインストールした後、それは何とか状態とページに追加されますように、私はいくつかのフックを作ることができると仮定します）タグが正しく動作するようにしてください）

render(){ 
    const NameOfACustomComponent = this.state.loadedWidgets[0] 
    return(<div><NameOfACustomComponent/></div> 
}

レンダリング後、カスタムDOMタグであり、既存のリアクションコンポーネントではありません。

ビルドしたいのは、新しいページを小さなウィジェット\ appsで置き換えるクロムの拡張機能です。ユーザーが頻繁に使用すると同時に、開発者は純粋なReact.jsで簡単に新しいウィジェットを追加することができます統合のためのいくつかのフック。

EDIT。 this issueによる2番目の質問に対する答えが見つかりました。クラスまたは関数への参照がある場合、リアクションで任意のコンポーネントを作成できます（ES5リアクションスタイル）。したがって、2つの問題と1つの問題の解決策の1つは、ウィンドウオブジェクト内にいくつかのレジストリを持たせて、コンポーネントを追加してフレームワークが利用できるようにすることです。ただし、厳密なClassインスタンスの方法で行う必要がありますが、ウィジェット自体を削除するだけではなく、それらのリスト全体を削除するメソッドを追加する必要があります。あなたはほとんどそこにいる

出典

2016-11-09 Azriel Gridfen

サードパーティコンポーネントはReactで構成されていますか？ –

、

{this.state.loadedWidgets.map(Widget => Widget)}

または多分に

{this.state.loadedWidgets.map(WidgetName => <WidgetName />)}

を変更も動作するはずです：

{this.state.loadedWidgets}

出典

2016-11-09 10:07:09 lustoykov

はい、編集で述べた問題を読んだ後、私はすべてのコンポーネントへの参照が必要だと理解しましたが、最初にReactがすべてのコンポーネントを名前で知るための魔法の方法を考えました。今私はそれが使用する必要があるコンポーネントを知って動作することができることを理解します。 –

を申し訳ありませんが、私は本格的なソリューションを投稿することができませんでした早く

動的コンポーネント読み込みの主な問題は、主に一部のDC（動的コンポーネント）が追加または削除されたことを主レンダラーコンポーネントに警告する方法です。もう1つは小さく、コンポーネントの操作を処理するオブジェクトを介して最初のものを解決することで簡単に修正できます。したがって、任意のDCが追加するだけで、このオブジェクト（RDCL）はそのことについて加入者に警告します。サンプルRDCLは、次のようになります。動的なサードパーティのコンポーネントは、別の問題が発生すると

class RDCL extends Array { //so we could use filtering and stuff 
    subscribe(componentType, callback) { // handle the way to notify subscriber when C. with corerct type added to RDCL } 
    unsubscribe(componentType = ALL, callback) { // remove subscription } 
    add(componentClassOrFunctionDefinition, [typeGoesHere?]) { // add component with default or provided or included type } 
    remove(componentClassOrFunctionDefinition) { // remove component } 
}

けれども - どのように処理するかを含めずに束ねる反応し、すでにメインのアプリ\フレームワークに含まれるすべてのライブラリ。これには、答えがありません。タイプ/バーベルのプレーンスクリプト以外のものを使用します。

サードパーティ製のコンポーネントは必要ありませんが、アプリ全体で動的にロードする場合はシンプルです

window.ReactComponentRegistry = {}; // somewhere in root component 

// some component that should be loaded dynamicaly (somewhat) 
class SomeComponent exteds Component { // ... }; 
window.ReactComponentRegistry['SomeComponentName'] = SomeComponent; 

//render() of view that would use that dynamic component 
const ArbitraryComponent = window.ReactComponentRegistry.SomeComponentName // ['SomeComponentName'] obviously will work too 
return(<ArbitraryComponent props={this.props} />);

出典

2016-11-26 07:29:57

React.jsに動的にコンポーネントをロードする

答えて

関連する問題