![](/img/trans.png)
[英]How to link together React child and parent components when instantiating them?
[英]how to link components in separate files together in react
在我正在调用的app.jsx文件中说:
var Main = require('./components/main.jsx');
ReactDOM.render(
<Main />, document.getElementById('container')
);
在我的main.jsx文件中,我想从不同的文件调用两个React类:
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)彼此紧挨着加载。 我是由上面的代码组成的,所以我不确定通用的原则或语法是否正确,但是我在很高的层次上询问如何实现上述目标。 谢谢
我认为您正在寻找的是异步模块定义(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的好部分,以及实用的程序员
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.