Как использовать реактивные компоненты из других файлов

У меня есть простой компонент responseJS:

var LikeCon = React.createClass({

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

Это помещается в файл Common.jsx. Я пытаюсь использовать этот компонент LinkeCon из файла antoher jsx, подобного этому

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

            );
        }
});

Проблема заключается в том, что это исключение выбрано

Ошибка при рендеринге "FeedBox" на "react1": ReferenceError: LikeCon не определено

Вот как выглядит импорт на странице 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>

Моя мысль заключалась в том, что если Common.jsx, содержащий общий компонент, был первым, тогда 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

    <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(Script Document [7]: 83: 33) → React.createElement(LikeCon, {initialLike: this.props.data.Like, я at script Документ [2]: 7021: 34 at обертка (Script Документ [2]: 12893: 21) в script Документ [2]: 6563: 14 на обертке (Script Документ [2]: 12893: 21) на ReactMultiChild.Mixin.mountChildren(Script Документ [2]: 12352: 42)
в ReactDOMComponent.Mixin._createContentMarkup (Script Документ [2]: 7801: 32) в script Документ [2]: 7723: 14 на обертке (ScriptДокумент [2]: 12893: 21) в script Документ [2]: 6569: 44 на обертке (Script Документ [2]: 12893: 21) в script Документ [2]: 6569: 44 at обертка (Script Документ [2]: 12893: 21) в script Документ [2]: 13797: 38 в Mixin.perform(Script Документ [2]: 16855: 20) на renderToString (Script Документ [2]: 13795: 24) в script Документ [9] [temp]: 1: 7 Линия: 7021 Колонка: 34

ОТВЕТЫ

Ответ 1

  • Добавить: <script src="Scripts/JSXTransformer.js"></script>
  • Вместо {LikeCon} используйте <LikeCon/>
  • Используйте type="text/jsx" в своих сценариях

Ответ 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... синтаксис немного отличается.