[英]ngReact can't find my react component
我一直在努力使它起作用很长时间,但是无论我做什么指令都找不到我的react组件。
这些是我包含的文件:
<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
文件中,而我所有的角度代码都位于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
但是它找不到。。可能出什么问题了,因为似乎没有其他人遇到这个问题?
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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.