在 React 组件中使用 split.js

如何解决在 React 组件中使用 split.js

我正在尝试创建一个可调整大小的地图，其中包含有关当前在地图组件下方地图上查看的位置的信息卡。使用 split.js 来做它，它似乎不起作用。它确实显示了组件之间的装订线，但在移动装订线时组件不会更新。对于 Map 组件，我使用 ReactMapGl 和一些基本道具，而信息卡只是 Material-UI 的基本卡片。

import React from 'react';
import Split from 'react-split';
import InfoCard from './InfoCard';
import Map from './Map';
import './Full.css'

const Full = () => (

<Split
    className='split' 
    direction="vertical" 
    minSize={0} 
    sizes={[50,50]} 
    gutterSize={10}
>

  <div>
    <Map/>
  </div>
  <div>
    <InfoCard/>
  </div>

</Split>
);

export default Full

css 文件

.gutter {
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-vertical {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
    cursor: row-resize;
}

遗憾的是，我无法提供任何 codeandBox.io 链接，因为我必须透露我的 API 代码。