如何在反应中将单独文件中的组件链接在一起答案

【问题标题】：how to link components in separate files together in react如何在反应中将单独文件中的组件链接在一起
【发布时间】：2016-03-30 13:30:28
【问题描述】：

在我正在调用的 app.jsx 文件中说：

var Main = require('./components/main.jsx'); 
 ReactDOM.render(
        <Main />, document.getElementById('container')

        );

在我的 main.jsx 文件中，我想从不同的文件中调用两个反应类：

    var comp1 = require('./comp1.jsx')
    var comp2 = require('./comp2.jsx')
    const MyMainComponent = React.createClass({
    return(
       <comp1></comp1>
       <comp2></comp2>
    );
    });
    module.exports = MyMainComponent;

在我的 comp1 文件中，我有一个简单的按钮和对话框：

var comp1 = React.createClass({
return(
<RaisedButton label="comp1" primary={true} onTouchTap={this._handleTouchTap} />
<dialog name = "test"></dialog>
_handleTouchTap: function(){
test.show()
};);

在我的 comp2 文件中，我的代码与 comp1.jsx 完全相同，只是我重命名了按钮。本质上，当文档加载 main.jsx 时，我希望两个组件（comp1 和 comp2）彼此相邻加载。我编写了上面的代码，所以我不确定一般原则或语法是否正确，但我在非常高的层次上询问如何实现我上面描述的目标。谢谢

【问题讨论】：

你在使用 node.js 吗？
你想在服务器端渲染你的反应类吗？
@LyesBEN 不，在此之前我想知道如何将类一起包含在另一个类中。基本上在不同文件中创建两个单独的组件后，我想将它们组合成一个组件。
您想同时使用来自不同文件的组件吗？
@LyesBEN 是的。 facebook 提供的文档适用于我们在同一个文件中声明组件的情况，但如果我在不同文件中声明组件，我似乎无法使其工作。

标签： javascript reactjs material-ui

【解决方案1】：

我认为您正在寻找的是异步模块定义 (AMD)。你可以使用 requirejs 来实现它。

首先你必须配置它，你可以在 app.js 文件或任何你想要的文件中进行配置：

require.config({
  paths: {
    react: 'vendor/react',
    reactDOM: 'vendor/react-dom',
    JSXTransformer: 'vendor/JSXTransformer'
  }
});

require(['reactDOM', 'jsx!main'], function(ReactDOM, Main) {
    ReactDOM.render(<Main />, document.getElementById('container'));
});

加载库后，您可以像这样定义您的模块：

comp1.jsx（或任何其他模块）

define(['react'], function(React) {
    var Comp1 = React.createClass({
        render: function() {
            return (

            )
        }
    });

    return Comp1;
});

main.jsx

define(['jsx!comp1', 'jsx!comp2'], function(Comp1, Comp2) {
    var Main = React.createClass({
        render: function() {
            return (
               <section>
                   <Comp1 />
                   <Comp2 />
               </section>
            );
        }
    });

    return Main;
});

最后，在您的 HTML 文件中：

<script data-main="js/app" src="js/vendor/require.js"></script>

如果您是初学者，这可能看起来很复杂，但在处理大型项目时这是值得的，所以最好养成习惯。

我还敦促您阅读一些有关编程的书籍。尝试 Javascript 的优秀部分，以及务实的程序员

【讨论】：