javascript - How to use react components from other files - Stack Overflow

admin管理员组

文章数量:1328037

I have a simple reactJS ponent like this :

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 ponent from antoher jsx file like this

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

This is how the import looks like on the 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 ponent was first, then the var would also be available to the other react ponents?

Edit :

this is placed on the 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 ponent is now refered to with <LikeCon like="0" /> instead of {LikeCon}.

Edit 2 :

This is how I use the LikeCon

var TopicComments = React.createClass({
    render: function() {
        var ment = this.props.data.map(function(, i) {
            return (
            <article key={i}>
            <div className="mentCon">
                <div className="tUImgLnk">
                    <a title={.UserName} target="_blank" href={.UserInfoUrl}>
                        <img className="tUImg" src={.UserPicSrc} />
                    </a>
                </div>
                <b><a href="#" title={"Visit " + .UserName} target="_blank">{.UserName}</a></b>&nbsp;:&nbsp;
                <span className="content">
                    {.Message}
                </span>
                <div className="status">
                    <div className="dateCreated dimText">
                        {.DateCreated}
                    </div>  
                    <LikeCon initialLike={.Like} initialLikeCount={.LikeCount} objectId={.Id} categoryKey={1} userId={this.props.userId} />
                    <article></article>
                </div>
            </div>
            </article>);
        }.bind(this));
        return(
            <div className="ments">
                {ment}
            </div>
            );
    }
});

This is how the script import looks like

    <script src=".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

I have a simple reactJS ponent like this :

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 ponent from antoher jsx file like this

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

This is how the import looks like on the 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 ponent was first, then the var would also be available to the other react ponents?

Edit :

this is placed on the 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 ponent is now refered to with <LikeCon like="0" /> instead of {LikeCon}.

Edit 2 :

This is how I use the LikeCon

var TopicComments = React.createClass({
    render: function() {
        var ment = this.props.data.map(function(, i) {
            return (
            <article key={i}>
            <div className="mentCon">
                <div className="tUImgLnk">
                    <a title={.UserName} target="_blank" href={.UserInfoUrl}>
                        <img className="tUImg" src={.UserPicSrc} />
                    </a>
                </div>
                <b><a href="#" title={"Visit " + .UserName} target="_blank">{.UserName}</a></b>&nbsp;:&nbsp;
                <span className="content">
                    {.Message}
                </span>
                <div className="status">
                    <div className="dateCreated dimText">
                        {.DateCreated}
                    </div>  
                    <LikeCon initialLike={.Like} initialLikeCount={.LikeCount} objectId={.Id} categoryKey={1} userId={this.props.userId} />
                    <article></article>
                </div>
            </div>
            </article>);
        }.bind(this));
        return(
            <div className="ments">
                {ment}
            </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

• javascript
• asp
• ponents
• reactjs

Share Improve this question Follow edited Mar 10, 2015 at 2:24 Jared Forsyth 13.2k77 gold badges4747 silver badges5656 bronze badges asked Feb 21, 2015 at 19:41 BansheeBanshee 15.8k4141 gold badges138138 silver badges234234 bronze badges 8

• Instead of using var did you try to define it on the global scope like window.LikeCon and see if works? – pablolmiranda Commented Feb 21, 2015 at 19:48
• I will try that but why could not var work as global? According to this it should : stackoverflow./a/944288/365624 – Banshee Commented Feb 21, 2015 at 20:01
• I tried this : window.LikeCon = React.createClass.. and then {window.LikeCon} in the other jsx file but it plains about windows not define? – Banshee Commented Feb 21, 2015 at 20:04
• windows doesn't exist, you should use window.LikeCon. – pablolmiranda Commented Feb 21, 2015 at 20:07
• Sorry, its window.LikeCon Im using, miss type. – Banshee Commented Feb 21, 2015 at 20:18

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 2

1. Add: <script src="Scripts/JSXTransformer.js"></script>
2. Instead of {LikeCon} use <LikeCon/>
3. Use type="text/jsx" in your scripts

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

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 ponent include this at the top of your file:

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

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

本文标签： javascriptHow to use react components from other filesStack Overflow