React 组件和模块导出答案

【问题标题】：React components and module exportsReact 组件和模块导出
【发布时间】：2016-03-08 06:39:54
【问题描述】：

我不明白 module.exports 如何只能导出一个依赖于子组件但仍会在 DOM 中呈现的组件，尽管该子组件从未被导出。

//component.js

var SubComponent = React.createClass({
...
    });

var Component = React.createClass({
    ...
    render: function () { 
    return(
        <div><SubComponent /> stuff</div>`)
        }});

module.exports = Component

//main.js

    var Component = require('./component.js');

    var MainContainer = React.createClass({
    render: function () {return (
    <Component />)
    }})

【问题讨论】：

标签： javascript reactjs module

【解决方案1】：

您在main.js 文件中仅直接使用了一个组件 (Component)。 SubComponent 不在component.js 之外使用，因此不必导出。如果你想在你的main.js 文件中使用SubComponent，你可以这样使用它：

//component.js

(...)
module.exports = {
    Component: Component,
    SubComponent: SubComponent
}

//main.js

 var Component = require('./component.js').Component;
 var SubComponent = require('./component.js').SubComponent; (...)

那么你可以直接在main.js中使用SubComponent

【讨论】：

但是看看原来的情况，在没有导出子组件的情况下，组件是如何渲染的呢？是不是 main.js 中未定义子组件，因为它从未被导出？子组件在 component.js 之外使用，因为它是 Component 的一部分
它像一条链子一样工作。 Component 可以看到 SubComponent 因为它在同一个 fale 中。如果你能在 main.js 中看到Component 就足够了；在您的情况下，只有 Component 需要查看子组件， MainContainer 不关心 Component 内部的内容，它只希望它会呈现
如果你熟悉Java，把非导出模块想象成private变量，定义它的类或文件可以看到（即Component可以使用Subcomponent，但是其他类（即其他 JS 文件）不能。