他のモジュール（WebPackとES6）からエクスポートしたReactJSクラスを初期化して使用するにはどうすればよいですか？

Question

私はWebPackとES6を使用していますので、module.exportsを使用することはできません。export defaultを使用する必要があります。私はこのようなライブラリを持っている：

// helloworld.js 
import React from 'react'; 

class HelloWorld extends React.Component { 
     test() { 
       alert("TEST FROM test()"); 
     } 
     render() { 
       alert("TEST"); 
       return (
         <p>Hello, world!</p> 
       ); 
     } 
} 

// THIS WORKS WHEN I REQUIRE THIS MODULE 
// var thing = new HelloWorld(); 
// thing.test(); 

export default HelloWorld; 

コメントアウト部分はときに私var helloworld = require('helloworld.js');動作しますが、私はこれを必要とする場所の外にこのオブジェクトを初期化して使用する方法を見つけ出すことはできません。

これらの試みはどれも動作しません。このオブジェクトを初期化して使用するにはどうすればよいですか？

// hello_world.test(); 
// hello_world.HelloWorld.test(); 
// var thing = new hello_world(); 
// var thing = new hello_world.HelloWorld(); 

私の主な理由は、このようなReactRouterを使用してルート内のコンポーネントを必要としているためです。

が、私はこれを試してみました（怒鳴る）と、このレンダリング方法を確認するために私に指示...

ReactDOM.render(
(<BrowserRouter> 
     <Switch> 
       <Route exact path="/helloworld" component={hello_world}/> 
     </Switch> 
</BrowserRouter>) 

これは（怒鳴る）空白のページをレンダリングします!!!!

ReactDOM.render(
(<BrowserRouter> 
     <Switch> 
       <Route exact path="/helloworld" component={hello_world.HelloWorld}/> 
     </Switch> 
</BrowserRouter>) 

アイデアがありません。 Thisは役に立ちません。どちらもthisです。誰かが私にいくつかのポインタを貸してくれますか？

EDIT：

ソリューションが必要の終わり（var hello_world = require('./helloworld.js').default;）でdefaultを追加するだけでした。これは、​​のようなルートでこれを使用するように機能します。

あなたが範囲外これを使用した場合、あなたはどうなる：

var thing = new hello_world(); 
thing.test(); 

作業溶液：

var hello_world = require('./hello_world.js').default; // Must add default. 

// Using it outside a route, with a class method called test(). 
var thing = new hello_world(); 
thing.test(); 

// Using it in a router (ReactRouter with Switch). 
ReactDOM.render(
(<BrowserRouter> 
     <Switch> 
       <Route exact path="/helloworld" component={hello_world}/> 
     </Switch> 
</BrowserRouter>) 
, document.getElementById("root")); 

Answer 1

var helloworld = require('helloworld.js').defaultは私のために働いています。 これを確認できますか？ 私がここで間違っていたら私を案内してください。

Answer 2

あなたが定期的にJSXファイルでコンポーネントを使用することができるはずです

var HelloWorld = require('path/to/HelloWorld.jsx'); 
...  
<div> 
    <HelloWorld></HelloWorld> 
</div> 

または反応ルータコンポーネント同じことが、このようなステートメントを必要とし、：

var HelloWorld = require('path/to/HelloWorld.jsx'); 
.... 
<Route exact path="/helloworld" component={HelloWorld}/>