React + Konva

[fxobject]

О великие Гуры, да помогут они нерадивому студенту!
Имеем Konva как вложенный компонент React. Важно, для Konva выделяется область и холст должен занять все выделенное место. Т.е. адаптивный холст.
что делать при resize - не писать, там понятно. Но вот как занять холстом 100% выделенное место при первом render? что то никак не получается.
что то типа такого:

<Stage width={'500'} height={'500'} ref={this.stage}>
   <Layer ref={this.layer}>

пытаюсь достать через componentDidMount но что то никак не думается.....
О юниоры и middle, не дайте студенту засохнуть.... (((( thanks

p.s. осенний ветер говорит нам, что лето - просрали...

[Nexus]

<Stage width={window.innerWidth} height={window.innerHeight} ref={this.stage}>

?

[fxobject]

не катит. выделенное место - это вышестоящий родительский элемент DOM, никак не window

[Nexus]

this.props.containerRef.offsetWidth ?

[fxobject]

ох та хде их взять то?
Контейнер также является компонентом React и также находится на этапе первого render. Причем, вложенные компоненты формируются примерно так:

{/*--- все вложенные компоненты -----------------------------*/ }
          { Object.keys(this.state.component).map((index)=>{
            return(
              <React.Fragment key={index}>
               { this.state.component[index].feature(
                 {  ...this.state.component[index].props },
                 { frameDisable  :  this.state.frameDisable,
                   indexName     : index,
                   dispatchEvent : this.componentHandler.bind(this,index)
                 }
               )}
              </React.Fragment>

Если очень кратко, то конечная страница из всех компонентов, классов и их производных, вообще чего бы то ни было формируется при помощи массива.
Вот где то в этом map и есть компонента с графиком.
Но не суть - на момент render нету параметров width и height родителя. даже если поставлю id и отладчиком посмотрю что то типа
getBoundingClientRect().
т.е. на момент первого рендера приходится уходить создавая холст с нулевым width и height и без прорисовки чего бы то ни было. Т.е. просто холст
Затем componentDidMount. Смотрите что получается...

<div style={{width:'100%',height:'100%'}} ref={this.refContainer}>
      <Stage width={'0'} height={'0'} ref={this.REF}>

вставил дополнительно div 100%
первый рендер идет с 0 width и height
componentDidMount. В нем смотрим
this.refContainer.current.getBoundingClientRect()
т.е. этот тот вот первый DIV
а там НУЛИ. ну и как дальше?

[fxobject]

даже если так сделать, будут все равно нули

<div style={{width:'100%',height:'100%'}} ref={this.refContainer}>
      <Stage width={'100'} height={'100'} ref={this.REF}>

[fxobject]

Вот еще момент. Страница организована таким образом, что в ней отражаются вкладки. Так вот, компонента с графиком при открытии находится в "спрятанной" вкладке. Собственно поэтому у нее и нули.
Думаю при переключении вкладки (событие) там значения должны появится. Но какой то путь ну совсем не айс...

[Aetae]

Так положись на вёрстку. Сделай что css:
width: 100%
height: 100%

И оно сам тянулось и тебя не волновало. Или библиотечный компонент-говно и не умеет следить за своим размером и обновляться?

...update: если это действительно так - накостыляй элементарную обёртку, типа:

const ResizableStage = (props) => {
  const [size, setSize] = useState({width: 0, height: 0});
  const stage = useRef(null);

  useLayoutEffect(() => {
    const observer = new ResizeObserver((entries) => {
      setSize(entries.pop().contentRect);
    });

    observer.observe(stage.current);

    return () => observer.observe();
  }, []);

  return (
    <div style={{position: 'relative', overflow: 'clip'}} ref={stage}>
      {size.width && size.height ? (
        <Stage
          style={{position: 'absolute', inset: 0}}
          width={size.width}
          height={size.height}
          {...props}
        />
      ) : null}
    </div>
  )
}

На реакте сто лет не писал, и не проверял, так что может сходу не заработать, но логика, думаю, ясна.