كيفية الحصول على طول وعرض مكون قبل عرضه في React؟

بتاريخ 15 دقائق مضت قال Emad Saif:

لدي مكون بسيط في React وأريد أن أقوم بعرضه في الصفحة، لكني أريد أن أعرف طوله وعرضه قبل أن أقوم بعرضه (أي قبل أن يتم عمل render للمكون)، بحيث أستعمل هذه الأبعاد في بعض العمليات الحسابية بعد ذلك.

فكرت في إستخدام useRef، ولكن لم أعرف كيف أستخدمها في هذه الحالة.

هل توجد طريقة تمكنني من معرفة الطول والعرض للعنصر قبل عرضه؟

إن كان ما تريده هو معرفة قياس الصفحة وعرض مكونات مختلفة حسب قياس الصفحة بشكل مشابه للـ media query فهنالك المكتبة التالية : react-responsive 

أما اذا كان ما تريده هو معرفة عرض العنصر ذاته فهذا يكون حسب القياس الذي اعطيته انت للعنصر فإذا كنت اعطيته width : 100% سيكون عرضه يساوي عرض الصفحة وطوله سيختلف حسب عرض الصفحة أما إذا حددت الـ width برقم معين سيكون عرضه هو العرض الذي حددته وسيكون له طول معين يمكنك استخراجه بسهولة.

ولا يمكنك حساب الطول والعرض بدون عمل render على المتصفح.

وبعد قول هذا يمكنك تأخير عرض عنصر معين حتى تعلم عرض وطول العنصر الاب الخاص به وبعد ذلك التحكم بالابن حسب هذه القياسات وكمثال : 

import React, { Component } from 'react';

export default class Example extends Component {
// هنا نعرف المتغير الذي يعبر عن القياسات ونجعله فارغاً  
  state = {
    dimensions: null,
  };

// هنا نضيف القياسات الخاصة بالمتغير ونقوم بإعادت التحميل
  componentDidMount() {
    this.setState({
      dimensions: {
        width: this.container.offsetWidth,
        height: this.container.offsetHeight,
      },
    });
  }

// هذه الوظيفة الخاصة بعرض الابن بالاعتماد على قياسات الاب
  renderContent() {
    const { dimensions } = this.state;

    return (
      <div>
        width: {dimensions.width}
        <br />
        height: {dimensions.height}
      </div>
    );
  }

  render() {
    const { dimensions } = this.state;

    return (
 //للحصول على القياسات الخاصة بالاب ref هنا استخدمنا الـ      
      <div className="Hello" ref={el => (this.container = el)}>
 // هنا نفحص إن كان هنالك قياسات ام لا وفي حال وجودها نقوم باستدعاء دالة طباعة الابن     
        {dimensions && this.renderContent()}
      </div>
    );
  }
}