複数の反応成分を動的にロードするには？

Question

こんにちは私はディレクトリから動的に複数の反応コンポーネントをロードしたいと思います。そのため、誰かがコンポーネントをロードするためにディレクトリにコンポーネントを追加すればよいだけです。私はラインに沿って何かを考えています：

import * as dynamicComponents from './dynamicComponents'; 

const toAdd = [] dynamicComponents.forEach(function(component){ 
toAdd.push(Route path={component.link} component={component.implmentation} /> }) 


render(<Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={Template}> 
     <IndexRoute component={Main} /> 
     {toAdd} 
     </Route> 
    </Router> 
    </Provider>, 
    document.getElementById('root')); 

これは可能ですか？

Answer 1

あなたの最初のimport文はBabelでは動作しないと思います。あなたの.babelrcにそれを追加

npm i --save-dev babel-plugin-wildcard 

：このパッケージを試してみてください

{ 
    "plugins": ["wildcard"] 
} 

お使いの環境でバベルを使用していないかもしれないが、基本的にあなたがワイルドカードからの読み込みの問題を解決する必要がありますまたは動的パス。それはおそらく難しい部分です。

また、ディレクトリにドロップされたすべてのファイルが、Reactコンポーネントクラスをデフォルトの書き出しとしてエクスポートし、リンクを返す静的関数を持っていることを確認する必要があります。

const SomeReactComponent =() => (<p>Rendering something.</p>); 

//Export link as static member of the class. 
SomeReactComponent.link = '/some/react/component/routing/link'; 

export default SomeReactComponent; 

すると、次のようなコードはコンパイル時に動作します：

import * as dynamicComponents from './dynamicComponents'; 

const toAdd = dynamicComponents.map((ComponentClass) => <Route path={ComponentClass.link} component={ComponentClass} />); 

これは、コンパイル時のソリューションです。ランタイムソリューションが必要な場合は、ES6インポート以外のインポータを使用して調査してください。実行時に動的に使用することはできません。