كيفية جعل العناصر دينامكيا react

jsx لن يتعرف على المكون بتلك الطريقة لأنه في هذه الحالة أصبح مكون مصطنع وفي المكونات المصطنعة في jsx يجب ان تبدأ تسميتها بحرف كبير لذا فالحل بالنسبة لهذه الحالة هو أن تعين العنصر في متغير ثم بالامكان بعد ذلك استخدامه بهذه الطريقة

import React from 'react'

export default function Dynamic(props) {

const DynamicHead = `h${props.head}`;

    return (
        <div>
            <DynamicHead></DynamicHead>
        </div>
    )
}

الطريقة الوحيدة لفعل ما تريد هي تعريف متحول وإسناد عنصر JSX المطلوب إليه حسب قيمة props هكذا:

import React from 'react'

export default function Dynamic(props) {
  let H = `h${props.head}`;
  return (
    <div>
      <H>{content}</H>
    </div>
  )
}

يمكنك تسمية المتحول H بأي شيء شرط أن يبدأ بحرف كبير، أكرر حرفاً كبيراً ﻷنه لن يعمل بدون ذلك.

قد تسأل "ومتى كنا نستطيع استخدام string variable كما لو كان component" ؟!!!! 

هذه من مقدرات الـReact المخبأة أي أنها غير موجودة في docs ، أنا بصراحة جلبتها من جواب على هذا السؤال: https://stackoverflow.com/questions/33471880/dynamic-tag-name-in-jsx-and-react

لا أدري كيف علم صاحب الجواب بوجود هكذا طريقة ولكنها طريقة فعالة وجميلة وليس فقط أنك استطعت اﻻختيار بين وسوم العناوين بل يمكنك تمرير أي html attributes تدعمها العناوين h1,2,3 إلخ ويمكنك تمرير onClick أيضاً وكل شيء تريده.

بالطبع إن احتجت في المستقبل أن تختار بين عدة Components ديناميكياً بدلاً من اﻻختيار بين عدة وسوم يمكن إسناد تابع component إلى متحول يبدأ بحرف كبير، مثال للتوضيح:

import React from "react";
function A(){
  return (<h1>2</h1>);
}
function B(){
  return (<p>hello</p>);
}
const components = {
  component1: A,
  component2: B
}
function C(props){
    const CustomComponent = components[`component${props.number}`];
    return <CustomComponent />
}

المهم ألا تنسى قاعدة البدء بحرف كبير ﻷن React يترجم أي شيء لا يبدأ بحرف كبير إلى وسم html ونحن لا نريد ذلك في الحالات أعلاه.