react 导入中的 as
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 导入中的 as相关的知识,希望对你有一定的参考价值。
参考技术A import React from 'react' 只导入 是 React。而 import * as React from 'react' 导出所有,并命名为 React。
而 import hash as Router from 'react' 导出hash,并命名为 Router。
捆绑为 UMD 的 React 组件在通过另一个 React 应用程序中的脚本标签导入时无法加载依赖项
【中文标题】捆绑为 UMD 的 React 组件在通过另一个 React 应用程序中的脚本标签导入时无法加载依赖项【英文标题】:React component bundled as an UMD can't load a dependency when imported via script tag in another react app 【发布时间】:2020-08-14 11:47:57 【问题描述】:我创建了一个简单的反应组件,我想有条件地将它导入另一个反应应用程序。 我设法通过 HTML 脚本标记导入它,然后从 window 变量中获取它。 只要 react 被捆绑在模块中,整个想法就可以工作。 我想使用父应用程序的外部反应实例,所以我已经像这样配置了 webpack:
const path = require('path');
module.exports =
entry: './index.js',
output:
path: path.resolve(__dirname, 'dist'),
filename: 'module.js',
library: 'test',
libraryTarget: 'umd',
,
externals:
'react':
'commonjs': 'react',
'commonjs2': 'react',
'amd': 'react',
'root': 'React'
;
编辑:
我已将外部更改为 react: 'React'
,并在父应用程序中将反应分配给window.React
变量。
const Test = (window as any).test.default
console.log(window.React)
console.log(Test)
return <Test />
上面的代码导致同样的错误。
Children: …, Fragment: Symbol(react.fragment), Profiler: Symbol(react.profiler), Component: ƒ, PureComponent: ƒ, …
ƒ ()return o.default.createElement("p",style:color:"green",fontWeight:"bold","Hello, I come from an external module!")
module.js:1 Uncaught TypeError: Cannot read property 'createElement' of undefined
已解决! 我发现 React 实例必须在 window.React 中可用 加载 UMD 脚本时的变量。起初,我设法通过在加载脚本之前从 CDN 加载 React 来运行它。最后,在确保 window.React 可用之后,我决定动态加载外部组件。它按预期工作。
【问题讨论】:
【参考方案1】:尝试使用一次
externals: react: 'window.React'
【讨论】:
【参考方案2】:像这样配置你的外部对象:
外部: 反应:'反应' ,
这不会在你的包中包含 React。 确保您将包含此捆绑包的应用程序在其窗口对象中导出 React。 通常在任何 React 项目中,React 实例都在窗口本身中可用。
【讨论】:
我按照你的指示将 React 添加到了 window 变量中,就像在后期编辑中一样。不幸的是,它导致了同样的错误。 您是否在 console.log 中获得了 window.React 的值? 另外,您的父应用程序中的 react 和 react-dom 版本是否与您在其他模块中使用的相同 我得到了 window.React 的值,就像在添加的 sn-p 中一样。我使用相同版本的反应。我没有使用 react-dom,我只导出一个段落。以上是关于react 导入中的 as的主要内容,如果未能解决你的问题,请参考以下文章
react-hook-form Controller 中“as”中的离子反应错误