javascript - 导入的 React 组件具有不需要的宽度 : 0 div at root and is stopping the component fill the parents CSS grid area

Question

我们都好吗？ CSS 菜鸟在这里。

我已经导入了 google-maps-react 并在我的元素中使用它。我正在尝试定义它与 CSS Grid 一起使用的空间。但是在 DOM 上呈现时会产生:

<div><-- Map Component--></div>

像这样，组件试图占用它的父 div 的空间，但不幸的是，外部 div 以 0px 宽呈现，但是下一个父级的 div 是我的代码，并为子元素提供了一个漂亮的网格-我希望他们填充的区域。

  ...
    return (
    <Map
    google={google}
    initialCenter={location}
    zoom={14}
    containerStyle={props.containerStyle}>
    <Marker
        name={'Name'}
        onClick={onMarkerClick}>
    </Marker>
    </Map>
);
}
export default GoogleApiWrapper({
    apiKey: ('Key'),
  })(MapContainer)

我需要 autos，因为它默认使用“100%”，它采用窗口大小。

<div style={{gridArea: '2 / 5 / 3 / 6'}}>
    <MapContainer containerStyle={{width: 'auto', height: 'auto'}} />
</div>

呈现的 HTML 和 CSS:

理想情况下，我想完全删除此 div，但 google-maps-react 源代码已被转译，因此不在 jsx 中 => 难以阅读。这可能是因为当我从我的定制组件中导出时，我将它包装在一个 GoogleApiWrapper 包装器中(根据 google-maps-react 文档)，但没有它就无法工作。我试着查看包装器类，但看不到任何可以帮助我的东西。

我可以尝试编辑 div 内容，或者让有用的内容 div 访问父级的父级属性，但我不确定如何操作。 google-maps-react Map 组件具有 style 和 containerStyle 属性，但是它们属于非问题子元素。我也不想在代码中计算大小并将其传递给 containerStyle(如果我可以帮助它的话)(尽管这会起作用)。

任何想法将不胜感激!

格雷格

编辑:

好吧，我设法通过编辑模块代码删除了 div。问题与 div 无关!

考虑关闭，但一旦解决可能仍会更新。

Answer 1

我找到了解决方案。它是通过进入 GoogleAPIComponent.js 文件并找到以下行从 google-maps-react 组件中删除 div 外部 div:

return _react2.default.createElement(
    'div',
     null,
     _react2.default.createElement(WrappedComponent, props),
     _react2.default.createElement('div', { ref: 'map' }));

并将它们更改为:

return _react2.default.createElement(
    _react2.default.Fragment,
    null,
    _react2.default.createElement(WrappedComponent, props),
    _react2.default.createElement('div', { ref: 'map' }));

然后像这样调用 map 组件:

<Map
    google={google}
    initialCenter={location}
    zoom={14}
    containerStyle={{ position: 'relative', width: '100%', height: '100%'}}>
    <Marker
        name={'Name'}
        onClick={onMarkerClick}>
    </Marker>
</Map>

我相信这是可行的，因为亲戚将组件保留在文档流中，因此 100% 属于父 div 而不是屏幕(绝对发生)+ 空白 div 不再导致子元素丢失大小!

可能会建议 PR