كيف أقوم باعادة تسمية عنصر HTML داخل مكون React؟

جميل جدا هذا السؤال 

يمكنك أن تستخدم الكود التالي 

return React.createElement(this.props.tagName , this.props, this.props.content);

بكل بساطة الطريقة الأسهل التي نستخدمها لكتابة مكونات ريأكت تسمى ب jsx وهي تبسيط للشكل المرفق لا أكثر ففي حالتنا يمكننا إستخدام الكود المرفق لانشاء المكون بالشكل الذي تريده بطريقة بسيطه حيث أن:

• this.props.tagName: هي اسم المكون الذي تريده على سبيل المثال في حالتنا هذه h1 أو h2 أو h3....إلخ
• this.props: هنا كل ال props يتم إعطاءها للمكون 
• this.props.content: هنا كل ال children أو الأبناء لهذا المكون وفي حالتنا هذه هو المحتوى الذي نود عرضه 
  
  فعلى سبيل المثال لو كتبنا بطريقة jsx الكود التالي 

<ComponentName color="blue" shadowSize={2}>
  Content Content
</ComponentName>

ف ريأكت تقوم بتحويل هذا الكود إلى الكود التالي وتتعامل معه

React.createElement(
  ComponentName,
  {color: 'blue', shadowSize: 2},
  'Content Content'
)

عسى أن يكون الأمر واضحا ومبسطا. 

بالتوفيق إن شاء الله.

في حالة العناوين الديناميكية (h1 ، h2 ...) ، يمكن للمكون إرجاع React.createElement على هذا النحو.

const Heading = ({level, children, ...props}) => {
    return React.createElement(`h${level}`, props , children)
}

ويمكن تمرير كل من الدعائم والأطفال.

<div>
	<Heading level={1}>Heading 1</Heading>
    <Heading level={2}>Heading 2</Heading>
    <Heading level={3}>Heading 3</Heading>
</div>
      

النتيجة 

Heading 1  <!-- بخط كبير -->
Heading 2  <!-- بخط متوسط-->
Heading 3  <!-- بخط صغر -->

لا نستطيع تفسير التعابير ضمن شيفرة JSX حسب التوثيق الرسمي

إنما نستطيع تعريف مكون ديناميكي و من ثم استخدامه كمثال بسيط:

const Heading = "h" + 1;
.
.
return <Heading>...</Heading>;

كمثال كامل:

لاحظ تمرير المتغير level حيث يتم تعريف ال HTML TAG قبل بنائه.

function TypographyHeading({text, level}) {

    // Select heading <h1> - <h5>:
    const Heading = "h" + level;

    return (
        <div>
            <Heading>
      			{text}
            </Heading>
        </div>
    );
}