javascript - 如何初始化和使用从其他模块(使用 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也没有。请问有人可以给我一些指点吗？

编辑:

解决方案只是添加 default在 require 的末尾( var hello_world = require('./helloworld.js').default; )。这可以在路由中使用它，例如:<Route exact path="/helloworld" component={hello_world}/> .

如果您要在范围之外使用它，您会这样做:

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 对我有用。你能检查一下吗？如果我在这里做错了，请指导我。