انتقل إلى المحتوى
أدوات التحويل

تحويل HTML إلى React JSX

يحوّل ترميز HTML إلى React JSX باستخدام htmltojsx: تصبح class هي className، وfor هي htmlFor، وتتحول الأنماط المضمّنة إلى كائنات style، وتُغلق الوسوم الفارغة ذاتيًا. تُغلَّف العناصر الجذرية المتعددة في fragment.

نقل قالب HTML ثابت أو نموذج إلى مكوّن React.

HTML

JSX

متى تستخدمها

  • نقل قالب HTML ثابت أو نموذج إلى مكوّن React.
  • تحويل مقتطف ترميز من وثائق أو مجموعة واجهات UI kit إلى JSX يمكنك لصقه في مكوّن.

طريقة الاستخدام

  1. الصق HTML في المحرر الأيسر.
  2. اختياريًا، افتح الإعدادات وفعّل "Create function component" لتغليف المخرجات في export const Foo = () => (...).
  3. انسخ JSX، وأعد تسمية المكوّن، واستبدل سمات الأحداث المضمّنة بمعالجات React.

HTML

<label class="field" for="email">Email</label>
<input id="email" type="email" tabindex="1" style="margin-top: 4px; font-size: 14px" disabled>
<!-- hint -->

JSX

<>
  <label className="field" htmlFor="email">
    Email
  </label>
  <input
    id="email"
    type="email"
    tabIndex={1}
    style={{ marginTop: 4, fontSize: 14 }}
    disabled=""
  />
  {/* hint */}
</>

التفاصيل والقيود

يجري التحويل في المتصفح وتُنسَّق المخرجات باستخدام Prettier (بلا فواصل منقوطة).

تبقى سمات الأحداث المضمّنة مثل onclick="go()" كما هي، ولا تتحول إلى معالجات onClick.

تحصل السمات المنطقية على سلسلة فارغة، مثل disabled="". يعامل React القيمة "" على أنها false، لذا غيّرها إلى disabled أو disabled={true}.

إذا كان الإدخال SVG، تعرض الصفحة تلميحًا يشير إلى SVG to JSX.

FAQ

كيف تُحوَّل الأنماط المضمّنة؟

تُحلَّل سلسلة style إلى كائن بمفاتيح camelCase، وتصبح قيم البكسل أرقامًا: يصبح style="margin-top: 4px" هو style={{ marginTop: 4 }}.

ماذا يحدث لتعليقات HTML؟

يُحتفظ بها كتعليقات JSX، مثلًا يصبح <!-- hint --> هو {/* hint */}.

هل يمكنني تسمية المكوّن المُنشأ؟

لا. يستخدم خيار الدالة الاسم Foo دائمًا. أعد تسميته بعد النسخ.

المواصفات والمراجع