Jak używać komponentów reagują z innymi plikami

Question

Mam proste reactJS składnik takiego:

var LikeCon = React.createClass({ 

    render: function() { 
     return (
      <span>Like</span> 
     ); 
    } 
}); 

ten jest umieszczony w pliku o nazwie Common.jsx. Im próbuje użyć tego składnika LinkeCon z antoher pliku JSX jak ten

var FeedTopic = React.createClass({ 
     render: function() { 
      var test = false; 
      return (
       <div className="topic"> 
         {LikeCon} 
       </div> 

      ); 
     } 
}); 

Problemem jest to, że jest wyjątek

Error while rendering "FeedBox" to "react1": ReferenceError: LikeCon is not defined

ten sposób import wygląda na Layoutpage

<script src="@Url.Content("~/Scripts/Common.jsx")"></script> 
<script src="@Url.Content("~/Scripts/Grid.jsx")"></script> 
<script src="@Url.Content("~/Scripts/Feed.jsx")"></script> 

Myślałem, że jeśli Common.jsx zawierający komponent współdzielony był pierwszy, to var byłby również dostępny dla innych komponentów reagowania?

Edit:

ten jest umieszczony na Layout.cshtml

<script type="text/jsx" src="@Url.Content("~/Scripts/JSXTransformer.js")"></script> 
<script type="text/jsx" src="@Url.Content("~/Scripts/Common.jsx")"></script> 
<script type="text/jsx" src="@Url.Content("~/Scripts/Grid.jsx")"></script> 
<script type="text/jsx" src="@Url.Content("~/Scripts/Feed.jsx")"></script> 

komponent jest teraz skieruję się z <LikeCon like="0" /> zamiast {LikeCon}.

Edit 2:

ten sposób używam LikeCon

var TopicComments = React.createClass({ 
    render: function() { 
     var comment = this.props.data.map(function(com, i) { 
      return (
      <article key={i}> 
      <div className="commentCon"> 
       <div className="tUImgLnk"> 
        <a title={com.UserName} target="_blank" href={com.UserInfoUrl}> 
         <img className="tUImg" src={com.UserPicSrc} /> 
        </a> 
       </div> 
       <b><a href="#" title={"Visit " + com.UserName} target="_blank">{com.UserName}</a></b>&nbsp;:&nbsp; 
       <span className="content"> 
        {com.Message} 
       </span> 
       <div className="status"> 
        <div className="dateCreated dimText"> 
         {com.DateCreated} 
        </div> 
        <LikeCon initialLike={com.Like} initialLikeCount={com.LikeCount} objectId={com.Id} categoryKey={1} userId={this.props.userId} /> 
        <article></article> 
       </div> 
      </div> 
      </article>); 
     }.bind(this)); 
     return(
      <div className="comments"> 
       {comment} 
      </div> 
      ); 
    } 
}); 

ten sposób import skrypt wygląda

<script src="http://fb.me/react-0.12.2.js"></script> 
    <script src="@Url.Content("~/Scripts/jquery-2.1.3.min.js")"></script> 
    <script src="@Url.Content("~/Scripts/jquery.autosize.min.js")"></script> 
    <script src="@Url.Content("~/Scripts/spin.min.js")"></script> 
    <script src="@Url.Content("~/Scripts/JSXTransformer.js")"></script> 

    <script src="@Url.Content("~/Scripts/Grid.jsx")"></script> 
    <script src="@Url.Content("~/Scripts/Feed.jsx")"></script> 
    @RenderSection("ScriptFoot", required: false) 
    @Html.ReactInitJavaScript() 
</body> 

Jest to wyjątek uzyskać:

Error while rendering "FeedBox" to "react1": ReferenceError: LikeCon is not defined at React.createClass.render (Script Document [7]:83:33) -> React.createElement(LikeCon, {initialLike: this.props.data.Like, i at Script Document [2]:7021:34 at wrapper (Script Document [2]:12893:21) at Script Document [2]:6563:14 at wrapper (Script Document [2]:12893:21) at ReactMultiChild.Mixin.mountChildren (Script Document [2]:12352:42)
at ReactDOMComponent.Mixin._createContentMarkup (Script Document [2]:7801:32) at Script Document [2]:7723:14 at wrapper (Script Document [2]:12893:21) at Script Document [2]:6569:44 at wrapper (Script Document [2]:12893:21) at Script Document [2]:6569:44 at wrapper (Script Document [2]:12893:21) at Script Document [2]:13797:38 at Mixin.perform (Script Document [2]:16855:20) at renderToString (Script Document [2]:13795:24) at Script Document [9] [temp]:1:7 Line: 7021 Column:34

Answer 1

1. Dodaj: <script src="Scripts/JSXTransformer.js"></script>
2. Zamiast {LikeCon} użycie <LikeCon/>
3. Zastosowanie type="text/jsx" w skryptach

Answer 2

Upewnij się wyeksportować komponent LikeCon i zaimportować go do pliku, który chcesz użyć go w

.

var LikeCon = React.createClass({ 

    render: function() { 
     return (
      <span>Like</span> 
     ); 
    } 
}); 

powinno być:

class LikeCon extends React.Component{ 

    render() { 
     return 
      <span>Like</span> 
     ); 
    } 
} 

export default LikeCon 

Następnie na dowolnym pliku (ów) chcesz użyć LikeCon zawierać składnik ten u góry pliku:

import LikeCon from'./path/to/LikeCon.jsx;

Uwaga: moja odpowiedź jest użycie ES2016 ... składnia jest odrobinę inna .