使用 react2angular，react 无法识别，没有错误

Question

我正在转换 angularjs 项目以做出反应。 为此，我使用 react2angular。 我已经按照教程进行操作，但由于某种原因，无法识别反应。 我没有收到任何错误。 注意：我也尝试过 ngReact 并且遇到了同样的问题。

我有一个非常简单的反应组件：
我的组件.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']));

我将组件添加到：
text.tpl.html

<div>
  <div class="QuestText">
    <my-component foo-bar="3" baz="'baz'"></my-component>
  </div>
</div>

当它运行时，我在 Chrome 的开发者工具中检查 html 页面，我看到了这个。

<div class="QuestText">
  <my-component foo-bar="3" baz="'baz'"></my-component>
</div

控制台中没有显示任何内容。 就好像它甚至不承认反应一样。

更多信息：

在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",
}

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

{
  "plugins": ["transform-react-jsx"],
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "node": "current",
        "browsers": [
          "chrome >= 59",
          "firefox >= 50",
          "ie >= 11",
          "edge >= 40"
        ]
      }
    }]
  ]
}

我不知所措。 我会很感激我能得到的任何帮助。

Answer 1

除非您在其他地方进行，否则您似乎没有引导 angular； 你还没有发布引导代码。

引导是使用ngApp指令完成的：

<body ng-app="deuiApp">

或手动：

angular.bootstrap(document.createElement('div'), ['deuiApp']);

Answer 2

代替：

import { Component } from 'react'

利用：

import React, { Component } from 'react'

Answer 3

我认为您缺少正确的注入方式，因为在 react2angular 的文档中它说

依赖注入很容易传递服务/常量/等。 到您的 React 组件：只需将它们作为第三个参数传入，它们将在您的组件的 Props 中可用。 例如：

angular
  .module('myModule', [])
  .constant('FOO', 'FOO!')
  .component('myComponent', react2angular(MyComponent, [], ['$http', 'FOO']))

您的代码必须按此顺序

angular
    .module('deuiApp', [])
    .component('myComponent', react2angular(MyComponent, [], ['fooBar', 'baz']));

使用 react2angular，react 无法识别，没有错误

问题描述

3 个解决方案

解决方案1
0 2020-01-21 22:10:15

解决方案2
0 2021-01-27 12:23:38

解决方案3
-1 已采纳 2019-11-15 10:49:58

使用 react2angular，react 无法识别，没有错误

问题描述

3 个解决方案

解决方案1 0 2020-01-21 22:10:15

解决方案2 0 2021-01-27 12:23:38

解决方案3 -1 已采纳 2019-11-15 10:49:58

解决方案1
0 2020-01-21 22:10:15

解决方案2
0 2021-01-27 12:23:38

解决方案3
-1 已采纳 2019-11-15 10:49:58