如何摆脱'ReactKonva目前不支持文本组件.你的短信是:"正在加载"'使用rea

Question

我想在谷歌地图层的顶部渲染一个Konva形状。由于我使用的是React，所以我使用了React konva和React谷歌地图/api库。

每次运行yarn start时，我都会收到以下错误：Text components are not supported for now in ReactKonva. You text is: "Loading..."

版本

• 反应konva："；16.13.0-6">
• react谷歌地图/api:"1.9.12〃
• konva："；7.0.6〃
• 铬："；85.0.4183.83〃

项目目录结构

这是一个使用create-react-app构建的简单应用程序。

.
├── Makefile
├── README.md
├── Vagrantfile
├── bootstrap.sh
├── package.json
├── public
│   ├── classic-outline.png
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── components
│   │   ├── KonvaShape.js
│   │   └── Map.js
│   │  
│   ├── index.css
│   ├── index.js
│   ├── serviceWorker.js
│   └── setupTests.js
└── yarn.lock

以下是我的组件：

应用程序.js

import React from 'react';
import './App.css';
import KonvaShape from './components/KonvaShape';
function App() {
return (
<div>
<KonvaShape />
</div>
);
}
export default App;

KonvaShape.js

import React from 'react';
import { Stage, Layer } from 'react-konva';
import Map from './Map';
function KonvaShape() {
return (
<Stage width={window.innerWidth / 2} height={window.innerHeight / 2}>
<Layer>
<Map />
</Layer>
</Stage>
);
}
export default KonvaShape;

Map.js

import React from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';
const containerStyle = {
width: '400px',
height: '400px'
};
const center = {
lat: -3.745,
lng: -38.523
};
function Map() {
const [map, setMap] = React.useState(null);
const onLoad = React.useCallback(function callback(map) {
const bounds = new window.google.maps.LatLngBounds();
map.fitBounds(bounds);
setMap(map)
}, [])
const onUnmount = React.useCallback(function callback(map) {
setMap(null)
}, [])
return (
<LoadScript
googleMapsApiKey={"ENTER YOUR GOOGLE MAPS API KEY HERE"}
>
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
onLoad={onLoad}
onUnmount={onUnmount}
>
{ /* Child components, such as markers, info windows, etc. */}
<></>
</GoogleMap>
</LoadScript>
)
}
export default React.memo(Map)

我是React和Konva的新手，但我的猜测是，在渲染KonvaShape组件之前，我应该等待谷歌地图组件安装。我试图使用KonvaShape自己的状态来管理这个技巧(正如这个答案所建议的ReactJS：如何仅在成功的异步调用后渲染组件？(，但我没有成功多少。

Answer 1

您正在尝试在此处注入非konva元素：

<Stage width={window.innerWidth / 2} height={window.innerHeight / 2}>
<Layer>
<Map />
</Layer>
</Stage>

直接这样做是不可能的。<Stage />仅支持konva节点。所以你可以在那里使用层、组和形状。

如果你想添加谷歌地图(这可能是一个DOM组件(，你有两种方法：

1. 将谷歌地图放在舞台顶部，并显示绝对位置：

<Stage width={window.innerWidth / 2} height={window.innerHeight / 2}>
{/* canvas internals */}
</Stage>
<div style={{ position: 'absolute', top: 0, left: 0 }}>
<Map/>
</div>

2. 或者您可以尝试使用DOM门户将映射注入Konva阶段。但这只是一个反应糖，在内部，你仍然会在舞台顶部有绝对的位置图