ngReact 找不到我的反应组件

Question

多年来我一直试图让它工作，但无论我做什么，指令都找不到我的反应组件。

这些是我要包含的文件：

<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>

我的组件在 react-components.min.js 文件中，我的所有 angular 代码都在 main.min.js 中。

据说您（可能（？））需要在浏览器中使用转换程序才能使该指令起作用，所以我尝试使用 babel，但这也不起作用。

这是我的反应组件：

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

并且在 react-components.min.js 文件中我得到了一个名为 'Chat':

的组件

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

但没有找到。可能是哪里出了问题，因为其他人似乎都没有这个问题？

Answer 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

JSXT运行sformer 已弃用，您应该添加一个使用 Babel 的构建步骤。 https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

查看我的博客 post 了解添加 JSX 和 ES6 支持的详细信息。 http://blog.tylerbuchea.com/migrating-angular-project-to-react/

ngReact 找不到我的反应组件

ngReact can't find my react component

angularjs

ngreact