Question

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

我有一个非常简单的react组件：
MyComponent.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

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

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

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

您的代码必须按此顺序

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

Answer 2

除非您在其他地方执行此操作，否则似乎并没有引导角度。您尚未发布引导代码。

引导是通过ngApp指令完成的：

<body ng-app="deuiApp">

或手动：

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

Answer 3

代替：

import { Component } from 'react'

使用：

import React, { Component } from 'react'

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

3 个答案: