如何使用其他文件中的反應組件

Question

我有一個簡單的reactJS組件，如下所示：

var LikeCon = React.createClass({

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

它放在名為Common.jsx的文件中。 我試圖像這樣使用antoher jsx文件中的這個LinkeCon組件

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

            );
        }
});

問題是拋出了這個異常

將“FeedBox”渲染為“react1”時出錯：ReferenceError：未定義LikeCon

這是導入在布局頁面上的樣子

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

我的想法是，如果包含共享組件的Common.jsx是第一個，那么var也可用於其他反應組件？

編輯：

這是放在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>

該組件現在<LikeCon like="0" />而不是{LikeCon} 。

編輯2：

這就是我使用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>
            );
    }
});

這是腳本導入的樣子

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

這是我得到的例外：

將“FeedBox”渲染為“react1”時出錯：ReferenceError：在React.createClass.render中沒有定義LikeCon（腳本文檔[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）在ReactMultiChild.Mixin.mountChildren（Script Document [2]：12352：42）
at ReactDOMComponent.Mixin._createContentMarkup（Script Document [2]：7801：32）at Script Document [2]：7723：14 at 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 （腳本文檔[2]：16855：20）at ScriptToString（Script Document [2]：13795：24）at Script Document [9] [temp]：1：7 Line：7021專欄：34

Answer 1

1. 添加： <script src="Scripts/JSXTransformer.js"></script>
2. 而不是{LikeCon}使用<LikeCon/>
3. 在腳本中使用type="text/jsx"

Answer 2

確保導出LikeCon組件，並將其導入要使用它的文件中。

var LikeCon = React.createClass({

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

應該：

class LikeCon extends React.Component{

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

export default LikeCon

然后，在您想要使用的任何文件上， LikeCon組件包含在您文件的頂部：

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

注意：我的答案是使用ES2016 ...語法有點不同。