React 组件和模块导出 [英] React components and module exports

问题描述

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

//component.js

var SubComponent = React.createClass({...});var Component = React.createClass({...渲染:函数(){返回(<div><子组件/>东西

`)}});module.exports = 组件

//main.js

 var Component = require('./component.js');var MainContainer = React.createClass({渲染:函数(){返回(<组件/>)}})

解决方案

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

//component.js

(...)模块.出口 = {组件:组件，子组件:子组件}

//main.js

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

然后就可以直接在main.js

中使用SubComponent

I don't understand how module.exports can only export one component that has a dependency on a subcomponent but still be rendered in the DOM although that sub component was never exported.

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

解决方案

You are using only one component directly (Component) in your main.js file. SubComponent is not used outside component.js, therefore it doesn't have to be exported. If you want to use SubComponent in your main.js file you could use it like this:

//component.js

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

//main.js

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

Then you can use SubComponent directly in main.js

这篇关于React 组件和模块导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！