ngReact не может найти мой реактивный компонент

0

Я пытался заставить это работать целую вечность, но независимо от того, что я делаю, директива не может найти мой компонент реакции.

Это файлы, в которые я включаю:

<script src="bower_components/react/JSXTransformer.js"></script>
<script src="bower_components/react/react-with-addons.js"></script>
<script src="bower_components/ngReact/ngReact.min.js"></script>
<script src="node_modules/babel-core/browser.js"></script>
<script src="static/react-components.min.js" type="text/babel"></script>
<script src="static/main.min.js"></script>

Где мои компоненты находятся внутри файла main.min.js react-components.min.js, а весь мой угловой код находится внутри main.min.js

Он заявил, что вы (возможно (?)) Должны использовать трансформатор в браузере для этой директивы, чтобы работать, поэтому я попытался использовать babel, но это также не работает.

Это мой реактивный компонент:

<react-component name="Chat" watch-depth="reference"></react-component>

И в файле react-components.min.js я получил компонент "Чат":

var Chat = React.createClass({
   render: function() {
    return <footer className="chat chat--dark">Hello John</footer>;
  }
});

core.value('Chat', Chat); // My application is bound to the core module

Но он не находит этого. Что может быть неправильным, потому что никто другой, похоже, не имеет этой проблемы?

  • 0
    ты нашел решение?
  • 0
    @SubhamTripathi SubhamTripathi Похоже, это проблема компиляции, когда вы должны скомпилировать код, чтобы его можно было прочитать в браузере. Посмотрите, вавилон, как это сделать.
Теги:
ngreact

1 ответ

1
Лучший ответ

Проблема компиляции JSX

Я считаю, что это ошибка компиляции. Я запустил ваш код через онлайн-компилятор (https://babeljs.io/repl/), заменив ваш текущий код компонента блоком ниже и посмотрим, работает ли он:

"use strict";

var Chat = React.createClass({
  displayName: "Chat",

  render: function render() {
    return React.createElement(
      "footer",
      { className: "chat chat--dark" },
      "Hello John"
    );
  }
});

core.value('Chat', Chat); // My application is bound to the core module

JSXTransformer устарел, вы должны добавить на этапе сборки, который использует Babel. https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

Ознакомьтесь с моим сообщением в блоге о том, как добавить поддержку JSX и ES6. http://blog.tylerbuchea.com/migrating-angular-project-to-react/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню