В ASP NET CORE 3.1 с ReactJS. NET как ссылаться на компоненты в нескольких файлах .JSX - PullRequest
0 голосов
/ 19 марта 2020

Справа с самого начала: я видел все посты и в последние несколько дней попробовал все их перестановки, но, похоже, это не работает для меня.

Мой проект ASP NET Core 3.1. Я следовал этому руководству: https://reactjs.net/tutorials/aspnetcore.html, где все компоненты «реагировать-реагировать» определены в одном файле. Я хочу, чтобы каждый компонент был в своем собственном файле. Когда я пытался использовать несколько файлов .jsx с «экспорт по умолчанию» и «импорт из», мой .jsx просто не выполнялся. == Если все компоненты находятся в одном файле, все работает нормально. Но как только я добавляю import A from './test.jsx', код молчит. Это просто не выполняется. Без ошибок, исключений ...

Вот дерево моего проекта: enter image description here

Вот ссылки на мои скрипты в Index. html:

<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0      /umd/react.development.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
<script src="~/Scripts/dist/Home/react/bundle.js"></script>

<script src="@Url.Content("~/js/test.jsx")"></script>
<script src="@Url.Content("~/js/MainPage.jsx")"></script>

Вот файл MainPage.jsx, который работает до тех пор, пока я не добавлю предложение импорта:

import Test from './test.jsx';

class MainPage extends React.Component {

render() {
    return (
        <div className="main">
            <h2>Main page stuff:</h2>
            <StatusBar />
            <Test />
        </div>
    );
}
} 

class StatusBar extends React.Component {

render() {
    return (
        <div className="status">
            <h4>Status Bar</h4>
        </div>
    );
}

}

И, наконец, вот test.jsx:

export default class Test extends React.Component {
render() {
    return (
        <div className="test">
            <h4>Test Bar</h4>
        </div>
    );
}
}

Может быть, мне нужен еще один нюгет ?: enter image description here

Альдо Я довольно свободно в этом разбираюсь. NET env, я совершенно новичок в javascript и реагируйте, пожалуйста, объясни подробно. В. NET мы вызываем это, используя пространство имен или ссылаясь на пространство имен.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...