无法使用React-Konva呈现内容
问题描述:
我最近在尝试使用React-Konva呈现Stage
时出现以下错误:Cannot read property 'getPooled' of null at Object.componentDidMount
。截至目前,我一直无法使用Konva渲染任何东西。我用typescript和webpack使用react-konva。 以下是我的简化代码:无法使用React-Konva呈现内容
.jsx:
import * as React from "react";
import * as ReactDOM from 'react-dom';
import { Layer, Stage, Rect, Group } from 'react-konva';
class Demo extends React.Component {
public render(): JSX.Element {
return (
<div style={{flex: 5}}>
<Stage width={320} height={320} style={{width: '100%', height: '100%'}}>
<Layer>
<Rect
height={32}
width={32}
x={0}
y={0}
fill={'#bb66bb'}
/>
</Layer>
</Stage>
</div>
);
}
}
我在反应,konva源代码 var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
问题追查到此行哪我(我相信)追溯到ReactUpdates
(这是react-dom
的一部分)中的以下代码。
var ReactUpdates = {
/**
* React references `ReactReconcileTransaction` using this property in order
* to allow dependency injection.
*
* @internal
*/
ReactReconcileTransaction: null,
...ommitted code here for brevity
};
module.exports = ReactUpdates;
显然,所引用的属性设置为null
......我只是不明白为什么react-konva
正在引用此属性,或者,如果我只是误读发生了什么。有任何想法吗? (另外,我正在使用v. 1.1.4 of react-konva
和v. 15.5.4 of react-dom
)
答
发现问题!这是一件在webpack.config.js
externals: {
"react": "React",
"react-dom": "ReactDOM",
"canvas": "canvas"
}
所有需要禁用,和它的工作就像一个魅力(不知道为什么,很遗憾)。
张贴解决方案的欢呼声。 –