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'
这样才可以

当然可以生效，你是不是没有export

change

ReactDOM.render({
    <Channel />,
    document.getElementById('content');
});

to

ReactDOM.render(
    <Channel />,
    document.getElementById('content');
);

代码截图全面一些

@beiciye 的回答解决了我的问题，但是值得注意的是，react-tools貌似无法识别ES6中export Card的写法，控制台报错如下：

Error: Parse Error: Line 5: Illegal export declaration
    at throwError (/usr/local/node-v5.11.0-linux-x64/lib/node_modules/react-tools/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2813:21)

(以下省略十万行)

因此只能用ES5的写法啦。

在src/card-render.js中添加module.exports = Card;
接着，在test.html同时引用build/card-render.js和build/channel-render.js即可。

也就是说，关键问题在于暴露build/card-render.js中的变量给外部使用。

【热门文章】