0

我制作了两个应用程序，一个用于 angularjs，一个用于响应。现在的问题是我在 angularjs 应用程序中包含了 react 构建并尝试初始化“”组件，但是当我运行代码时它说未定义测试。

有人可以帮我解决这个问题，或者告诉我如何摆脱这个问题。

反应组件：

import React from 'react';
import ReactDOM from 'react-dom';


  class Test extends React.Component {
    render() {
        return (
          <div>
            Hello
          </div>
        );
      }
   }

角Js代码：

<!DOCTYPE html>
  <html>
   <head>
    <title></title>
   </head>
    <body ng-app="angular-app">

    <div id="root"></div>

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>

    <script src="react/dist/build.js"></script>

    <script>
        ReactDOM.render(<Test/>, document.getElementById('root'));
    </script>
   </body>
</html>
4

2 回答 2

1

你应该在你的 react 应用程序中编写以下代码，然后在 angularJS 应用程序中加载你的包文件。

ReactDOM.render(<Test/>, document.getElementById('root'));
于 2019-06-08T06:30:48.163 回答
1

问题是，你不能在浏览器中使用 jsx，jsx 通常使用 Babel 转译成 JavaScript 函数调用。

所以 1.<Test />永远不会在浏览器中工作，你需要 Babel 。

  1. 你需要对你的angularjs做出反应，我能想到的最好的方法是
// In react, instead of exporting component, export a function that mount component in given HTML


Export default (elm) => ReactDOM.render(<Test/>, elm)
于 2020-08-26T08:26:47.713 回答