如何使用其他文件中的react组件

How to use react components from other files

本文关键字：react 组件 文件 何使用 其他      更新时间：2024-02-21

我有一个简单的reactJS组件，如下所示：

var LikeCon = React.createClass({
    render: function() {
        return (
            <span>Like</span>
        );
    }
});

这被放在一个名为Common.jsx的文件中。我正试图使用类似的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也可以用于其他react组件？

编辑：

它被放置在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:LikeCon未在React.createClass.render中定义（脚本文档[7] ：83:33）->React.createElement（LikeCon，{initialLike:this.props.data.Like，i在脚本文档[2]：7021:34脚本文档处的包装器（脚本文档[2]：12893:21）[2] ：6563:14在包装器处（脚本文档[2]：12893:21）ReactMultiChild.Mixin.mountChildren（脚本文档[2]：12352:42）
位于ReactDOMComponent.Mixin._createContentMarkup（脚本文档[2] ：7801:32）在Script文档[2]处：7723:14在包装器处（Script文档[2]：12893:21）在Script处文档[2]：6569:44在包装器处（脚本文件[2]：12893:21）在脚本文件[2]中：6569:44在脚本文档处的包装器（脚本文档[2]：12893:21）[2] ：13797:38在Mixin.perform（脚本文档[2]：16855:20）在脚本文档处的renderToString（脚本文档[2]：13795:24）[9] [温度]：1:7行：7021列：34

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

确保导出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…语法有点不同。

相关文章：