让antd modal根据google maps map的大小展开

Question

我有一个简单的 antd 模态，使用 Row 和 Col 网格划分。如果我在一侧放置一些内容，模态框会根据需要展开，但在另一侧我使用 google-maps-react.

显示地图

这里的问题是，我希望地图有一定的大小，但是当内容很少时，它会溢出模态，看起来很傻。

这是我的代码目前的样子：

export function MyModal () {
  return (
    <Modal>
     <Row>
        <Col lg={12}>
          [MY CONTENT]
        </Col>
        <Col lg={12}>
          <div>
              <Map google={google}
                initialCenter={{ lat: 45.42, lng: -75.69 }}
                zoom={14}
                style={{ width: 420, height: 400 }}
              />
          </div>
        </Col>
      </Row>
    </Modal>
  )
}

当MY_CONTENT没有多少时，地图溢出模态，看起来像这样：

然而，当我在模态的另一边填充内容时，它自然会展开。所以我不明白为什么地图不展开。

无论如何，问题是我怎样才能使模态框的右侧也尽可能地扩展，以便地图适合它？

谢谢！

编辑：我创建了一个 code sandbox 以便可以看到 antd 组件。不幸的是，我不知道如何在 SO 的代码片段编辑器上执行此操作。

Answer 1

原来这是因为我的 Map 组件是一个 iframe。我了解到，在这种情况下，它不会带入自己的宽度和高度，因此父div认为它全是0或类似的东西。

我的解决方案是在 div 上设置宽度和高度。由于无论如何这在地图上都是静态的，所以这不是问题。所以现在我的代码如下所示：

export function MyModal () {
  return (
    <Modal>
     <Row>
        <Col lg={12}>
          [MY CONTENT]
        </Col>
        <Col lg={12}>
          <div style={{ width: 420, height: 400 }}>
              <Map google={google}
                initialCenter={{ lat: 45.42, lng: -75.69 }}
                zoom={14}
                style={{ width: 420, height: 400 }}
              />
          </div>
        </Col>
      </Row>
    </Modal>
  )
}

让antd modal根据google maps map的大小展开

Make antd modal expand according to size of google maps map

javascript

google-maps-api-3

reactjs

antd