ReactKonva目前不支持如何摆脱文本组件您输入的是使用react-konva和react-google-maps / api的“正在加载...”吗？

如何解决ReactKonva目前不支持如何摆脱文本组件您输入的是使用react-konva和react-google-maps / api的“正在加载...”吗？

我想在Google Maps图层的顶部渲染Konva形状。由于我使用的是React，因此我使用了react-konva和react-google-maps / api库。

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

版本

react-konva：“ 16.13.0-6”
react-google-maps / api：“ 1.9.12”
konva：“ 7.0.6”
Chrome浏览器：“ 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

这是我的组成部分：

App.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 组件之前等待Google Maps组件安装。我尝试使用 KonvaShape 自己的状态来管理此技巧（此答案提示ReactJS: How to render components only after successful asynchronous call?），但并没有成功。

解决方法

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

NeatInput

不可能直接执行此操作。 NeatInput仅支持konva节点。因此，您可以在其中使用图层，组和形状。

如果要添加Google地图（可能是DOM组件），则有两种方法：

将Google地图以绝对位置放置在舞台顶部：

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

或者您可以尝试使用DOM portal将地图注入Konva舞台。但这只是一个反应糖，在内部，您仍然会在舞台上拥有绝对位置图。