So verwenden Sie reagieren Komponenten aus anderen Dateien

Question

Ich habe eine einfache reactJS Komponente wie folgt aus:

var LikeCon = React.createClass({ 

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

Dies in einer Common.jsx genannt Datei abgelegt wird. Im Versuch, diese LinkeCon Komponente aus antoher jsx Datei zu verwenden, wie diese

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

      ); 
     } 
}); 

Das Problem ist, dass diese Ausnahme

geworfen wird

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

Dies ist, wie der Import sieht aus wie auf dem 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> 

Mein Gedanke war, dass, wenn Common.jsx, die die gemeinsame Komponente enthält, zuerst war, dann die Var auch für die anderen react-Komponenten verfügbar wäre?

Edit:

dies auf der Layout.cshtml platziert

<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> 

Die Komponente wird nun statt {LikeCon} mit <LikeCon like="0" /> refered.

Edit 2:

Dies ist, wie ich die LikeCon verwenden

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> 
      ); 
    } 
}); 

Dies ist, wie das Skript Import sieht aus wie

<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> 

Dies ist die Ausnahme erhalte ich:

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. Anzahl: <script src="Scripts/JSXTransformer.js"></script>
2. Statt {LikeCon} Nutzungs <LikeCon/>
3. Verwenden type="text/jsx" in Ihren Skripten

Answer 2

Stellen Sie sicher, Ihre LikeCon Komponente exportieren und importieren Sie es in der Datei, die Sie in sie verwenden möchten

.

var LikeCon = React.createClass({ 

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

sollte sein:

class LikeCon extends React.Component{ 

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

export default LikeCon 

dann auf jedem beliebigen Datei (en) Sie wollten umfassen diese am Anfang der Datei LikeCon Komponente verwenden:

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

Hinweis: meine Antwort ist ES2016 mit ... Syntax ein bisschen anders .