Javascript 错误参考错误：未定义React |使用角度中的React组件

因此，基本上我想在我的Angular项目中呈现一个React组件（通知组件）。我创建了

Notification.tsx

import*as React from'React'；
从“react”导入{FunctionComponent，useEffect，useRef，useState}；
从“@material ui/core”导入{IconButton、徽章、菜单、列表、ListItem、ListItemIcon、ListItemText、ListItemSecondaryAction、Avatar}；
从“@material ui/icons”导入{通知、删除、事件、沙漏、报警}；
从'@material ui/core/styles'导入{makeStyles}；
从'@material ui/core/colors'导入{grey}；
导出接口NotificationProps{}
导出构造NotificationComponent:FunctionComponent=（props:NotificationProps）=>{
返回
};

包装器组件

NotificationWrapper.tsx

import{AfterViewInit，Component，ElementRef，OnChanges，OnDestroy，SimpleChanges，ViewChild，viewenclosuration}从'@angular/core'导入；
从“./Notification”导入{NotificationComponent}；
从“React”导入*作为React；
从“react dom”导入*作为react dom；
const containerElementName='notificationComponentTemplate'；
@组成部分({
选择器：“反应通知组件”，
模板：``，
封装：视图封装。无，
})
导出类NotificationWrapper实现OnChanges、OnDestroy和AfterViewInit{
@ViewChild（containerElementName，{static:false}）containerRef:ElementRef；
构造函数（）{}
ngOnChanges（更改：SimpleChanges）：无效{
这个。render（）；
}
ngAfterViewInit（）{
这个。render（）；
}
恩贡德斯特罗（）{
ReactDOM.unmountComponentAtNode（this.containerRef.nativeElement）；
}
私有渲染（）{
ReactDOM.render(
，this.containerRef.nativeElement）；
}
}

将此包装器添加到

app.module.ts

的

@NgModule

从“./react components/notification/NotificationWrapper”导入{NotificationWrapper}；
@NGD模块({
声明：[
通知包装器，
],
})

使用了通知包装选择器，如下所示：

当在本地提供服务时，一切都很好，正如我在这个网站上遇到的其他类似问题一样：我已经将

“jsx”：“react”

添加到

tsconfig.json

插件：[
新的webpack.ProvidePlugin({
“反应”：“反应”，
})
]

及

外部：{
“反应”：“反应”
},

到

webpack.config.js

。这是整个文件供参考

//解决https://github.com/angular/angular-cli/issues/7200
const path=require（'path'）；
const webpack=require（'webpack'）；
//更改正则表达式以包含要排除的包
const regex=/firebase\/（应用程序| firestore）/；
module.exports={
模式:"生产",，
条目：{
//这是我们的Dynamic universal Express服务器
服务器：'./server.ts'
},
外部：{
“./dist/server/main”：“require（“./server/main”）”，
“反应”：“反应”
},
目标：'节点'，
节点：{
__dirname:false，
__文件名：false，
},
解析：{扩展名：['.ts'，'.js']}，
目标：'节点'，
模式：“无”，
//这确保我们包括节点_模块和其他第三方库
外部：[/node\u modules/，函数（上下文、请求、回调）{
//将firebase产品从捆绑中排除，以便在运行时使用require（）加载它们。
if（正则表达式测试（请求））{
返回回调（null，'commonjs'+请求）；
}
回调（）；
}],
优化：{
最小化：false
},
输出：{
//将输出放在dist文件夹的根目录下
path:path.join（uu dirname，'dist'），
文件名：'[name].js'
},
模块：{
noParse:/polyfills-.\.js/，
规则：[
{test:/\.ts$/，loader:'ts loader'}，
{
//将“@angular/core”中的文件标记为使用SystemJS样式的动态导入。
//删除此选项将导致出现弃用警告。
测试：/（\\\\\/）@angular（\\\\\/）core（\\\\\\/）.+\.js$/，
解析器：{system:true}，
},
]
},
插件：[
新的webpack.ProvidePlugin({
“反应”：“反应”，
}),
新建webpack.ContextReplacementPlugin(
//修复了警告关键依赖项：依赖项的请求是一个表达式
/（.+）？角形（\\\\\/）磁芯（.+）？/，
join（uu dirname，'src'），//src的位置
{}//你的路线图
),
新建webpack.ContextReplacementPlugin(
//修复了警告关键依赖项：依赖项的请求是一个表达式
/（.+）？表示（\\\\\/）（.+）？/，
join（uu dirname，'src'），
{}
)
]
};

---

我的问题是，当我构建我的应用程序时，通知组件没有呈现，我在控制台

error ReferenceError:React没有定义
。有什么我错过的吗？提前感谢。
将以下内容添加到
tsconfig.json

“编译器选项”：{
“allowSyntheticDefaultImports”：true，
“jsx”：“反应”，
}

在
angular.json

替换

import*as React from'React'；
从“react dom”导入*作为react dom

与

从“React”导入React；
从“react dom”导入react dom；
将以下内容添加到
tsconfig.json

“编译器选项”：{
“allowSyntheticDefaultImports”：true，
“jsx”：“反应”，
}

在
angular.json

替换

import*as React from'React'；
从“react dom”导入*作为react dom

与

从“React”导入React；
从“react dom”导入react dom；
遇到同样的问题，尽管这个解决方案不起作用