从其他dirs导出多个react对象

Question

我是很新的反应，所以请原谅我的无知。我基本上想知道从目录导出多个ReactJS对象的“方法”，以获得更大的代码库和最佳实践。这并不是ReactJS教程中的内容。

假设我有一个文件./main.js，并且我想要导入一个lib（从dir中导入，因为我可能还有其他的lib）。

假设我在目录./library_dir/my_lib.js中有一个库，我希望在./main.js中使用它。

在./main.js中，我可能希望使用这个库并初始化一些exampleComponent，如下所示：

var my_lib = require('./library_dir/my_lib.js');

ReactDOM.render(
(<BrowserRouter>
        <Switch>
                <Route exact path="/component_route" component={my_lib.ExampleComponent}>
        </Switch>
</BrowserRouter>)
, document.getElementById("root"));

因此，在./library_dir/my_lib.js中，我希望能够导出多个reactjs类。我该怎么做？

import React from 'react';

my_lib = { 
        test_function: function() {
                alert("TEST FUNCTION CALLED");
        },  
        // How would I do this bellow?
        ExampleComonent: class ExampleComponent extends React.Component {
                constructor(props) {
                        super(props);
                        // doing all thing things...
                }
                render() {
                        return (
                        <h1>This is ExampleComponent.</h1>
                        );
                }
        }   
        // I need to be able to export multiple components, so here's another one.
        ExampleComonentTwo: class ExampleComponentTwo extends React.Component {
                constructor(props) {
                        super(props);
                        // doing all thing things...
                }
                render() {
                        return (
                        <h1>This is ExampleComponentTwo.</h1>
                        );
                }
        }
}

export default my_lib;

Answer 1

正如我们所知，module是一个带有exports属性的普通JavaScript对象。exports是一个普通的JavaScript变量，碰巧被设置为module.exports。导出默认值是来自ES6的语法。

许多人认为module.exports=...等效于export default...，exports.foo...等效于export constfoo=...。但这并不完全正确，或者至少巴别塔不是这样做的。

ES6default导出实际上也被命名为导出，只不过default是一个“保留”名称，并且有特殊的语法支持。让我们看看Babel是如何编译命名导出和默认导出的：

// input
export const foo = 42;
export default 21;

// output
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = exports.foo = 42;
exports.default = 21; 

在这里，我们可以看到默认导出成为exports对象的一个属性，就像foo一样。

我建议您使用一个index.js文件，在该文件中，您必须从lib导出组件并在实际实现中使用它们。

null

希望这对你有帮助！！