Question

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

有人可以帮我这个忙吗，或者让我知道如何摆脱这个问题。

反应成分：

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>

Answer 1

您应该在react应用中编写以下代码，然后将bundle文件加载到angularJS应用中。

ReactDOM.render(<Test/>, document.getElementById('root'));

Answer 2

事实是，您不能在浏览器中使用jsx，通常使用Babel将jsx转换为JavaScript函数调用。

因此1. <Test />将永远无法在浏览器中运行，您需要对此保持通通。

您需要对您的angularjs做出反应，我能想到的最好方法是

// In react, instead of exporting component, export a function that mount component in given HTML


Export default (elm) => ReactDOM.render(<Test/>, elm)

如何在angular js中使用react组件

2 个答案: