javascript - reactjs的数据流组件写在不同的外部文件中可以吗？
本文介绍了javascript - reactjs的数据流组件写在不同的外部文件中可以吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1.代码展示：
我想在多个页面中复用Card组件，Card组件写在src/card-render.js中。
var Card = React.createClass({
render:function(){
return (
<div>
This is a card.
</div>
);
}
});
在Channel组件中引用Card组件，Channel组件写在src/channel-render.js中。
var Channel = React.createClass({
render:function(){
return (
<Card />
);
}
})
ReactDOM.render(
<Channel />,
document.getElementById('content');
);
我用了react-tool对jsx语法进行了转换,jsx --watch src/ build/,而test.html内容如下：
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="content">
</div>
<script src="build/card-render.js"></script>
<script src="build/channel-render.js"></script>
</body>
</html>
2.问题描述
事实上，这些位于不同的Javascript文件中的组件的相互引用没有生效，请问：
(1)数据流组件不能定义在不同的Javascript文件中吗？这样的话组件复用岂不非常麻烦？
(2)如果可以，那么我的问题在哪里呢？
解决方案
在card-render.js 这个js文件中，你需要export Card
在channel-render.js中，你需要import {Card} from 'card-render.js'
上面那个是在es6的写法，如果是es5的话就 var Card = require 'card-render.js'
这样才可以
这篇关于javascript - reactjs的数据流组件写在不同的外部文件中可以吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
