reactjs, сообщающий между несколькими файлами

Я новичок в реакции и пытается понять архитектуру приложения reactjs. Я создал два разных js-файла с кодом реакции (spc.js и index.js). Файл spc.js содержит все определения многократного использования, а index.js состоит из вызывающего компонента и функции reactDom. Оба этих файла вызывается из файла index.html. пожалуйста, найдите код ниже.reactjs, сообщающий между несколькими файлами

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 в один файл, однако он не работает, если я разделяю два файла

Благодаря

источник

2015-12-29 Shakil Bharucha

Вам нужно включить 'spj.js' в index.js, чтобы использовать его. –

это может помочь вам http://stackoverflow.com/questions/25499083/connect-reactjs-component-from-another-file –

любая помощь о том, как включить spc.js в index.js, очень понравится. –

Комбинация не должна быть частью реакции вы должны использовать общий Js шаблон с require скажем, у меня есть два компонента А и В мой компонент должен быть как

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;

теперь, если я хочу использовать компонент а в Компонент в, то я должен иметь, чтобы использовать export.modules=A в компонент а и в компоненте BI импортировать компонент А как

в ES5

var A=require('B');

в ES6

import A from 'B'

теперь вы можете использовать компонент А в вашем B Компонент как

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

источник

2015-12-29 13:00:01

ошибка. Требование не определено –

@CharanCherry: вам нужно использовать module.exports = B в компоненте B, см. Мою обновленную версию ans \ –

Одним из решений является установка классов в глобальном масштабе. Например, ваш spc.js может быть:

(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 = { }))

Тогда ваш index.js мог бы:

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

Я надеюсь, что это помогает! (:

источник

2016-06-14 21:36:21

. Решение, которое не рекомендует подход, который включает systemjs или что-то еще, – xhallix

reactjs, сообщающий между несколькими файлами

ответ

Смежные вопросы