search

Home  >  Q&A  >  body text

javascript - reactjs的数据流组件写在不同的外部文件中可以吗？

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)如果可以，那么我的问题在哪里呢？

伊谢尔伦伊谢尔伦2791 days ago698

reply all(5)I'll reply

  • 怪我咯

    怪我咯2017-04-11 10:03:14

    在card-render.js 这个js文件中，你需要export Card
    在channel-render.js中，你需要import {Card} from 'card-render.js'
    上面那个是在es6的写法，如果是es5的话就 var Card = require 'card-render.js'
    这样才可以

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-11 10:03:14

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

    reply
    0
  • 高洛峰

    高洛峰2017-04-11 10:03:14

    代码截图全面一些

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-11 10:03:14

    change

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

    to

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

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-11 10:03:14

    @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中的变量给外部使用。

    reply
    0
  • Cancelreply