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

Posted 2023-02-23

【中文标题】如何使用来自其他文件的反应组件

【英文标题】：How to use react components from other files

【发布时间】：2015-04-23 09:34:48

【问题描述】：

我有一个像这样的简单 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，我在 Script Document [2]:7021:34 at 脚本文档中的包装器（脚本文档 [2]:12893:21） [2]:6563:14 at wrapper (Script Document [2]:12893:21) at ReactMultiChild.Mixin.mountChildren（脚本文档 [2]:12352:42） 在 ReactDOMComponent.Mixin._createContentMarkup （脚本文档 [2]:7801:32) 在脚本文档 [2]:7723:14 在包装器（脚本 文档 [2]:12893:21) 在脚本文档 [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] [temp]:1:7 行：7021 列：34

【问题讨论】：

您是否尝试在window.LikeCon 之类的全局范围内定义它，而不是使用 var 并查看是否有效？

我会尝试，但为什么 var 不能作为全局工作？据此它应该：***.com/a/944288/365624

我试过这个：window.LikeCon = React.createClass.. 然后 window.LikeCon 在另一个 jsx 文件中，但它抱怨 windows 没有定义？

windows 不存在，您应该使用window.LikeCon。

对不起，它的 window.LikeCon 我正在使用，错过了类型。

【参考方案1】：

地址：<script src="Scripts/JSXTransformer.js"></script> 而不是LikeCon 使用<LikeCon/> 在您的脚本中使用type="text/jsx"

【讨论】：

JSXTransformer.js 是一个普通的 javascript 文件，所以它的类型不应该是“text/jsx”

抱歉，仍然无法正常工作，请参阅我的第一篇文章中的编辑 2。

【参考方案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...语法有点不同。