使用 react2angular，react 无法识别，没有错误
[英]Using react2angular, react isn't recognized, no erros
问题描述
I am transitioning an angularjs project to react.
我正在转换 angularjs 项目以做出反应。 For this I'm using react2angular.为此，我使用 react2angular。 I've followed the tutorials, but for some reason, react isn't recognized.我已经按照教程进行操作，但由于某种原因，无法识别反应。 I'm not receiving any errors.我没有收到任何错误。 Note: I've also tried ngReact and had the same problem.注意：我也尝试过 ngReact 并且遇到了同样的问题。
I have a very simple react component:我有一个非常简单的反应组件：
MyComponent.jsx我的组件.jsx
import { Component } from 'react'
import { react2angular } from 'react2angular'
class MyComponent extends Component {
render() {
console.log('MyComponent Render');
return <div>
<p>FooBar: {this.props.fooBar}</p>
<p>Baz: {this.props.baz}</p>
</div>
}
}
angular
.module('deuiApp', [])
.component('myComponent', react2angular(MyComponent, ['fooBar', 'baz']));
I added the component to:我将组件添加到：
text.tpl.html text.tpl.html
<div>
<div class="QuestText">
<my-component foo-bar="3" baz="'baz'"></my-component>
</div>
</div>
When it's running and I inspect the html page in Chrome's Developer Tools, I see this.当它运行时，我在 Chrome 的开发者工具中检查 html 页面，我看到了这个。
<div class="QuestText">
<my-component foo-bar="3" baz="'baz'"></my-component>
</div
Nothing shows up in the console.控制台中没有显示任何内容。 It's as if it doesn't even recognize react.就好像它甚至不承认反应一样。
More Information:更多信息：
In package.json -- npm packages are installed在package.json --安装 npm 包
dependencies: {
"angular": "1.6.10",
"angular-cookies": "1.6.10",
"angular-i18n": "1.6.10",
"angular-resource": "1.6.10",
"angular-sanitize": "1.6.10",
"prop-types": "^15.7.2",
"react": "^16.11.0",
"react-bootstrap": "0.32.1",
"react-dom": "^16.11.0",
"react2angular": "^4.0.6",
},
devDependencies: {
"babel-loader": "7.1.2",
"babel-plugin-transform-react-jsx": "6.24.1",
"webpack": "3.11.0",
"webpack-dev-server": "2.11.2",
}
Relevant information in webpack.config.js webpack.config.js中的相关信息
module.exports = function () {
const config = {};
config.resolve = {
extensions: ['.js', '.jsx', '.ts', '.css', '.scss']
};
config.devtool = 'source-map'
config.module = {
rules: [
{
test: /\.(js|jsx)$/,
use: ['ng-annotate-loader', {
loader: 'awesome-typescript-loader',
options: {
entryFileIsJs: true,
transpileOnly: true
}
}],
exclude: [/node_modules/],
}]
}
return config;
}();
.babelrc .babelrc
{
"plugins": ["transform-react-jsx"],
"presets": [
["env", {
"modules": false,
"targets": {
"node": "current",
"browsers": [
"chrome >= 59",
"firefox >= 50",
"ie >= 11",
"edge >= 40"
]
}
}]
]
}
I'm at a loss.我不知所措。 I'd appreciate any help I can get.我会很感激我能得到的任何帮助。
3 个解决方案
解决方案1
0 2020-01-21 22:10:15
It appears that you're not bootstrapping angular, unless you're doing it somewhere else;除非您在其他地方进行，否则您似乎没有引导 angular； you haven't posted the bootstrapping code.你还没有发布引导代码。
Bootstrapping is either done with an ngApp directive:引导是使用ngApp指令完成的：
<body ng-app="deuiApp">
or manually:或手动：
angular.bootstrap(document.createElement('div'), ['deuiApp']);
解决方案2
0 2021-01-27 12:23:38
Instead of:代替：
import { Component } from 'react'
use:利用：
import React, { Component } from 'react'
解决方案3
-1 已采纳 2019-11-15 10:49:58
I think you are missing the right injection way, because in the documentation of react2angular it says我认为您缺少正确的注入方式，因为在 react2angular 的文档中它说
Dependency Injection It's easy to pass services/constants/etc.
angular
.module('myModule', [])
.constant('FOO', 'FOO!')
.component('myComponent', react2angular(MyComponent, [], ['$http', 'FOO']))
your code must be in this order您的代码必须按此顺序
angular
.module('deuiApp', [])
.component('myComponent', react2angular(MyComponent, [], ['fooBar', 'baz']));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.