无法使用 React-Konva 呈现内容
Unable to render content with React-Konva
我最近在尝试使用 React-Konva 渲染 Stage
时遇到以下错误:Cannot read property 'getPooled' of null at Object.componentDidMount
。截至目前,我一直无法使用 Konva 渲染任何内容。我将 react-konva 与 typescript 和 webpack 一起使用。
以下是我的简化代码:
.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>
);
}
}
我已经在 react-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"
}
所有都需要被禁用,它就像一个魅力(不知道为什么,不幸的是)。
我最近在尝试使用 React-Konva 渲染 Stage
时遇到以下错误:Cannot read property 'getPooled' of null at Object.componentDidMount
。截至目前,我一直无法使用 Konva 渲染任何内容。我将 react-konva 与 typescript 和 webpack 一起使用。
以下是我的简化代码:
.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>
);
}
}
我已经在 react-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"
}
所有都需要被禁用,它就像一个魅力(不知道为什么,不幸的是)。