Изменение размера dv svg контейнера на основе родительского размера в реаги

Question

У меня есть приложение с простой реакцией, в котором есть компонент карты, который отображает базовое изображение карты в данный момент.вот мой класс компонентов:

export interface IMapProps {
   imageWidth: number;
   imageHeight: number;
   width: number;
   height: number;
   clipX0: number;
   clipY0: number;
   clipWidth: number;
   clipHeight: number;
   updateInterval: number;
}

 interface IMapState {

 }

export default class Map extends React.Component<IMapProps, IMapState> {

    ref: SVGSVGElement;

    constructor(props: IMapProps) {
        super(props);
        his.state = {

        };
     }


   componentDidMount() {
      const svg = d3.select(this.ref);



   const img = svg.append('g')
                  .attr('id', 'map')
                  .attr('transform', 'translate(' + (-this.props.clipX0) + ',' + (-this.props.clipY0) + ')')
                  .call(d3.zoom()
                  .scaleExtent([1, 4])
                  .translateExtent([[0, 0], [this.props.imageWidth, this.props.imageHeight]])
                   .on('zoom', function() {
                    img.attr('transform', d3.event.transform);
               }));

               img.append('image')
               .style('cursor', 'move')
               .attr('xlink:href', './map.png')
               .attr('x', 0)
               .attr('y', 0)
               .attr('width',  this.props.imageWidth + 'px')
               .attr('height', this.props.imageHeight + 'px');

   img.append('image')
      .style('cursor', 'move')
      .attr('id', 'player')
      .attr('xlink:href', './player.png')
      .attr('x', 40)
      .attr('y', 40)
      .attr('width',  50 + 'px')
      .attr('height', 50 + 'px');           

    }

   update = () => {
       console.log('Updating ... map');
       this.setState({

        });
   };

   render() {
       return (
           <svg className='container' ref={(ref: SVGSVGElement) => this.ref = ref}
           width={this.props.width} height={this.props.height}>
           </svg>
         );
   }

}

Я использую этот компонент из своего корневого компонента следующим образом:

 <Segment>
        <Map
            imageWidth={1000}
            imageHeight={892}
            width={1000}
            height={300}
            clipX0={0}
            clipY0={0}
            clipWidth={500}
            clipHeight={200}
            updateInterval={3000}
        />
    </Segment>

Я использую semantic-ui и мойродительский элемент в этом случае div изменяется автоматически.Я изо всех сил пытаюсь настроить свой компонент таким образом, чтобы значения ширины и высоты компонента изменялись в зависимости от его родительской ширины и высоты.Я попробовал Google и попробовал некоторые решения, такие как получение ширины и высоты родительского элемента внутри моего компонента, например,

this.ref.parentNode.clientWidth

Но в моем случае это ссылка svg component иПохоже, у parentNode нет свойств clientWidth и clientHeight.Может ли кто-нибудь помочь мне в этом отношении?Как я могу получить родительскую ширину и высоту и соответственно изменить размер компонента SVG?