在 Angular 应用程序中实现 ReactJS答案

【问题标题】：Implementing ReactJS into Angular App在 Angular 应用程序中实现 ReactJS
【发布时间】：2018-06-08 08:03:27
【问题描述】：

我正在开发一个网站并尝试包含一个 ReactJS 组件，我正在这样做：

import React from "react";
import ReactDOM from "react-dom";
import Layout from "Layout.jsx";

const app = angular.module('myApp');

const reactDirective = app.directive('reactDirective', function() {

  return {
      template: '<div id="reactapp"></div>',
      link: function(scope, el, attrs){
          ReactDOM.render(<Layout/>, document.getElementById('reactapp'));
        }
    }
});

和 Layout.jsx

import React from 'react';
export default class Layout extends React.Component {
    constructor(props){
      super(props);
    }
    render() {
        return (
            <div>
                This is ReactJS
            </div>
        );
   }
}

但是，无论何时编译，它都会给我
ERROR in ./react-app.js Module not found: Error: Cannot resolve module 'layout.jsx'
谁能告诉我我的代码有什么问题？

【问题讨论】：

标签： angularjs reactjs webpack

【解决方案1】：

不存在于node_modules 中的本地文件的导入必须是相对路径。

import Layout from "./Layout.jsx";

【讨论】：