如何使用来自其他文件的react组件

I have a simple reactJS component like this :

我有一个简单的反应堆js组件如下:

var LikeCon = React.createClass({

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

This is placed in a file called Common.jsx. Im trying to use this LinkeCon component from antoher jsx file like this

这是放置在一个名为Common.jsx的文件中。我正在尝试使用antoher jsx文件中的这个LinkeCon组件

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

            );
        }
});

The problem is that this exception is thrown

问题是这个异常被抛出。

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

在将“FeedBox”渲染为“反应物”时出错:ReferenceError: LikeCon没有定义。

This is how the import looks like on the Layoutpage

这就是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 thought was that if Common.jsx that contains the shared component was first, then the var would also be available to the other react components?

我的想法是，如果普遍的话。首先是包含共享组件的jsx，那么其他的react组件也可以使用var吗?

Edit :

编辑:

this is placed on the Layout.cshtml

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

The component is now refered to with <LikeCon like="0" /> instead of {LikeCon}.

组件现在用代替{LikeCon}来引用。

Edit 2 :

编辑2:

This is how I use the LikeCon

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

This is how the script import looks like

这就是脚本导入的方式。

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

This is the exception I get :

这是我得到的例外:

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

在将“FeedBox”呈现给“反应物t1”时发生错误:ReferenceError: LikeCon在反应炉上没有定义。渲染(脚本文件[7]:83:33)->反作用。createElement(LikeCon { initialLike:this.props.data。比如，我在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反应物multichilin . mixin。mountChildren(脚本文档[2]:12352:42)位于反应堆组件. mixin。_createContentMarkup(脚本文档[2]:7801:32)在脚本文档[2]:7723:14在包装(脚本文档[2]:12893:21)在脚本文档[2]:6569:44在包装(脚本文档[2]:12893:21)执行(脚本文档[2]:16855:20)在renderToString(脚本文档[2]:13795:24)在脚本文档[9][temp]:1:7行:7021列:34

2 个解决方案

#1

Add: <script src="Scripts/JSXTransformer.js"></script>
添加:< script src = "脚本/ JSXTransformer.js " > < /脚本>
Instead of {LikeCon} use <LikeCon/>
而不是{LikeCon}使用。
Use type="text/jsx" in your scripts
在脚本中使用type="text/jsx"

#2

Make sure you export your LikeCon component, and import it in the file you want to use it in.

确保您导出了您的LikeCon组件，并将其导入到您想要使用它的文件中。

var LikeCon = React.createClass({

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

should be:

应该是:

class LikeCon extends React.Component{

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

export default LikeCon

Then on whatever file(s) you wanted to use LikeCon component include this at the top of your file:

然后在您想要使用LikeCon组件的任何文件中，在您的文件顶部包含以下内容:

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

从“进口LikeCon。/路径/ / LikeCon.jsx;

Note: my answer is using ES2016...syntax is a tad different.

注意:我的回答是使用ES2016…语法有点不同。

#1

Add: <script src="Scripts/JSXTransformer.js"></script>
添加:< script src = "脚本/ JSXTransformer.js " > < /脚本>
Instead of {LikeCon} use <LikeCon/>
而不是{LikeCon}使用。
Use type="text/jsx" in your scripts
在脚本中使用type="text/jsx"

#2