Импортированный компонент React имеет нежелательную ширину: 0 div в корне и останавливает компонент, заполняющий родительскую область сетки CSS - PullRequest
Новая
       22

Импортированный компонент React имеет нежелательную ширину: 0 div в корне и останавливает компонент, заполняющий родительскую область сетки CSS

1 голос
/ 28 июня 2019

Как мы все? CSS нуб тут.

Я импортировал google-maps-реакции и использую его в своем проекте. Я пытаюсь определить пространство, которое он использует с помощью 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)

Мне нужны авто, так как по умолчанию используется значение «100%», которое принимает размер окна. 

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

Визуализированный HTML & CSS:

Rendered HTML & CSS

В идеале я хотел бы полностью удалить этот div, но исходный код google-maps-реагирует, и его нет в jsx => для чтения. Это может быть связано с тем, что когда я экспортирую из своего пользовательского компонента, я оборачиваю его в оболочку GoogleApiWrapper (в соответствии с документами google-maps-реагировать), но без него он не работает. Я попытался заглянуть в класс-оболочку, но не увидел ничего, что я мог бы использовать, чтобы помочь.

Я мог бы попытаться отредактировать содержимое divs или сделать полезный контент divs доступным к родительским свойствам родителей, но я не уверен, как. Компонент карты google-maps-реагирует имеет свойства style и containerStyle, однако они относятся к не проблемным дочерним элементам. Я также не хочу вычислять размер в коде и передавать его в containerStyle, если смогу помочь (хотя это сработает).

Любые идеи будут с благодарностью!

Грег

EDIT:

Хорошо, мне удалось удалить div, отредактировав код модуля. Проблема не связана с div!

Рассмотрите возможность закрытия, но все еще можете обновить после разрешения.

Ответы [ 2 ]

0 голосов
/ 01 июля 2019

Я нашел решение.Чтобы удалить div external div из компонента google-maps-реагировать, перейдите в файл GoogleAPIComponent.js и найдите строки: 

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

Я считаю, что это работает, потому что родственник сохраняет компонент в потоке документов и поэтому 100% относится к родительскому элементу div, а не к экрану (что происходитв абсолютном выражении) + пустой div больше не приводит к потере размера для детей!

Может предложить PR

0 голосов
/ 28 июня 2019

Ваша проблема в том, что дочерний div является абсолютным положением, в то время как родительский объект имеет ширину auto, автоматическая ширина будет соответствовать его относительной ширине содержимого. попробуйте установить ширину: 100% вместо авто на 

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

или сгибать 1 

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