1.代码展示：
我想在多个页面中复用Card组件，Card组件写在src/card-render.js中。
var Card = React.createClass({
render:function(){
return (
<p>
This is a card.
</p>
);
}
});
在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>
<p id="content">
</p>
<script src="build/card-render.js"></script>
<script src="build/channel-render.js"></script>
</body>
</html>
2.问题描述
事实上，这些位于不同的Javascript文件中的组件的相互引用没有生效，请问：
(1)数据流组件不能定义在不同的Javascript文件中吗？这样的话组件复用岂不非常麻烦？
(2)如果可以，那么我的问题在哪里呢？
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
在
card-render.js这个js文件中，你需要export Card在
channel-render.js中，你需要import {Card} from 'card-render.js'上面那个是在es6的写法，如果是es5的话就
var Card = require 'card-render.js'这样才可以
当然可以生效，你是不是没有export
代码截图全面一些
change
to
@beiciye 的回答解决了我的问题，但是值得注意的是，react-tools貌似无法识别ES6中
export Card的写法，控制台报错如下：(以下省略十万行)
因此只能用ES5的写法啦。
在src/card-render.js中添加
module.exports = Card;接着，在test.html同时引用build/card-render.js和build/channel-render.js即可。
也就是说，关键问题在于暴露build/card-render.js中的变量给外部使用。