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組件和模塊導出

回答

相關問題