在函数内导出对象答案

【问题标题】：Export object inside of function在函数内导出对象
【发布时间】：2017-03-28 22:20:55
【问题描述】：

我正在尝试编写功能性无状态组件，但这样做遇到了问题。我将 Navigator 包装在一个以 props 作为参数的函数中（这些是任意的）。被包装的组件当前定义如下，因为它用于该组件的 reducer。

export const Navigator = StackNavigator(screens, navigatorConfig);

const NavigatorView = (props) => {
    return (<Navigator screenProps={{ ...props }}/>);
};

这可行，但理想情况下，我希望能够将Navigator 实例化为NavigatorView 函数中的局部变量，并在那里导出，以便我可以灵活地在实例化时设置哪些属性（ 如下图所示）。

const NavigatorView = (myArg, props) => {
    const Navigator = StackNavigator(screens, myArg);
    return (<Navigator screenProps={{ ...props }}/>);
};

这里的问题如下，我如何导出Navigator（reducer 中使用的），同时将其包装在一个函数中？我试过module.exports = Navigator;、export const Navigator...，但它们不起作用。谢谢。

【问题讨论】：

let Navigator = null;（在NavigatorView 之外）和Navigator = StackNavigator(screens, myArg) 在NavigatorView 内？
除了Navigator 被导出到reducer 之外，这将起作用，因此它在两个地方被使用，在这个模块和reducer。

标签： javascript reactjs react-native jsx react-native-navigation

【解决方案1】：

创建一个返回函数的函数怎么样？

export const generateNavigator = (screens, navigatorConfig) => 
  StackNavigator(screens, navigatorConfig);

const NavigatorView = (myArg, props) => {
    const Navigator = generateNavigator(screens, myArg);
    return (<Navigator screenProps={{ ...props }}/>);
};

【讨论】：

嗯，有趣的方法。但由于Navigator 在两个地方使用，在reducer 和模块本身中，它需要是相同的引用。完美的解决方案是能够将StackNavigator 包装在函数中；所以我可以传递它的参数，然后导出它。