我有一个像这样的简单 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>

            );
        }
});

问题是抛出了这个异常

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

这是导入在布局页面上的样子

<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 是第一个，那么其他 React 组件也可以使用该 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>

这是我得到的异常:

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

最佳答案

1. 地址:<script src="Scripts/JSXTransformer.js"></script>
2. 代替{LikeCon}使用 <LikeCon/>
3. 使用type="text/jsx"在你的脚本中

关于javascript - 如何使用来自其他文件的 React 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28650447/