React组件和模块导出

我不明白module.exports如何只能导出一个组件，它依赖于子组件，但仍然在DOM中呈现，尽管该子组件从未导出。React组件和模块导出

//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 />) 
    }})

来源

2016-03-08 akantoword

您直接在您的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; (...)

然后你可以使用SubComponent直接在main.js

来源

2016-03-08 06:48:16

但看看原来的情况，组件如何在没有导出子组件的情况下呈现第一？不是在main.js中未定义的子组件，因为它从未被导出？子组件正在component.js之外使用，因为它是组件 – akantoword

的一部分它的工作原理类似于链。 '组件'可以看到'SubComponent'它是在同一个fale中。如果你可以在main.js中看到'Component'就足够了;只有组件需要在你的情况下看到子组件，MainContainer不关心组件内部是什么，它只是期望它会呈现 –

如果你对Java很熟悉，可以将非导出模块看作私有变量，类或文件定义的地方可以看到它（即'Component'可以使用'Subcomponent'，但其他类（即其他JS文件）不能。 – lux

React组件和模块导出

回答

相关问题