Question

我是reactjs的新手，并试图理解架构一个reactjs应用程序。我用反应代码（spc.js和index.js创建了两个不同的js文件。spc.js文件包含所有可重用的组件定义，而index.js包含调用组件和reactDom功能。这两个文件都是从index.html文件中调用的。请找到下面的代码。

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Investor Relations</title>
    <!-- Not present in the tutorial. Just for basic styling. -->
    <link rel="stylesheet" href="spc.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="spticker_content">
    </div>
    <script type="text/babel" src="sharepriceticker.js"></script>
    <script type="text/babel" src="../default/sharepriceticker/sharepriceticker.js"></script>
  </body>
</html>

spc.js

   var Companyname = React.createClass({
     render: function() {
       return ( < div className = "company_name" > {
         this.props.compname
       } < /div>            );
     }
   });

   var Exchange = React.createClass({
     render: function() {
       return ( < span className = "exch_text" > {
         this.props.exchange
       } < /span>);
     }
   });

index.js

var Sharepriceticker = React.createClass({
  render:function(){
    return(
        <div className="spticker">
            <div className="heading">
                <Companyname compname="Indus Gas"/>
                <Exchange exchange="(LON:INDI)"/>
            </div>
        </div>
    );   
  }
});

ReactDOM.render(
    <Sharepriceticker/>,
    document.getElementById('spticker_content')
);

如果我将spc.js和index.js合并到单个文件中，我的代码可以正常工作，但是如果我将这两个文件分开则无法正常工作

由于

Answer 1

一种解决方案是在全局范围内设置类。例如，您的spc.js可能是：

＆＃13;

(function (app) {
  app.reactClasses = app.reactClasses || { };

  app.reactClasses.Companyname = React.createClass({
     render: function() {
       return ( < div className = "company_name" > {
         this.props.compname
       } < /div>            );
     }
   });

  app.reactClasses.Exchange = React.createClass({
     render: function() {
       return ( < span className = "exch_text" > {
         this.props.exchange
       } < /span>);
     }
   });
})(window.app || (window.app = { }))

＆＃13;

然后你的index.js可能有：

＆＃13;

<app.reactClasses.Companyname compname="Indus Gas"/>
<app.reactClasses.Exchange exchange="(LON:INDI)"/>

＆＃13;

我希望这有帮助！（：

Answer 2

组合不应该是您必须使用require的常见js模式的反应的一部分让我们说我有两个组件A和B. 我的A组件应该像

var A=React.createClass({
  render:function()
   {
    return(
       // html content goes here
      )
    }
});

我的组件B看起来像

 var B=React.createClass({
      render:function()
       {
        return(
           // html content goes here
          )
        }
    }); 
   module.exports = B;

现在，如果我想在组件B中使用组件A，那么我必须在组件A中使用export.modules=A，在组件B中我必须导入组件A，如

ES5中的

var A=require('B');

ES6中的

import A from 'B'

现在您可以在B组件中使用组件A，如

var A=React.createClass({
  render:function()
   {
    return(
       <A />
      )
    }
});

reactjs在多个文件

2 个答案: