UTILS.
۱۰۰٪ در مرورگر

تبدیل HTML به JSX / React

یک قطعه HTML را به JSX معتبر برای React تبدیل کنید — تغییر نام ویژگی‌ها، خودبسته کردن تگ‌های void، و تبدیل استایل‌های inline به شیء style.

— خروجی اینجا نمایش داده می‌شود —

درباره این ابزار

مبدل HTML به JSX / React یک قطعه HTML را با DOMParser بومی مرورگر تجزیه می‌کند و آن را به‌عنوان JSX معتبر بازسریالایز می‌کند، و هر چیزی را که React نیاز دارد رفع می‌کند. کاملاً سمت-کلاینت اجرا می‌شود، پس مارک‌آپی که می‌چسبانید روی دستگاه شما می‌ماند. هر HTML را بچسبانید — یک export طراحی، یک قالب ایمیل، یک طرح کامپوننت — و JSXای بگیرید که می‌توانید مستقیماً در یک فایل React بگذارید.

بازنویسی، ویژگی‌های رزرو‌شده را تغییر نام می‌دهد (class به className، ‏for به htmlFor)، بقیه را camelCase می‌کند — tabindex به tabIndex، ‏maxlength به maxLength، ‏stroke-width به strokeWidth — در حالی که ویژگی‌های data-* و aria-* را دست‌نخورده رها می‌کند. عناصر void مانند img، ‏br، ‏input و hr خودبسته می‌شوند (<img />)، کامنت‌های HTML به {/* ... */} تبدیل می‌شوند، آکولادهای literal در متن به‌صورت {'{'} escape می‌شوند، و یک رشته inline به‌شکل style="a:b;c:d" به یک شیء style={{ a: 'b', c: 'd' }} با کلیدهای CSS به‌صورت camelCase تبدیل می‌شود. ویژگی‌های بولین مانند disabled می‌توانند برهنه یا به‌صورت ={true} با یک کلید تغییر تولید شوند.

خروجی fragment را انتخاب کنید — چند گره ریشه به‌طور خودکار در یک fragment به‌شکل <>...</> پیچیده می‌شوند — یا خروجی کامپوننت-کامل، که JSX را در یک export default function با نام و تورفتگی انتخابی شما (۲ فاصله، ۴ فاصله، یا tab) می‌پیچد. نتیجه آماده چسباندن است؛ چون تجزیه از یک DOM واقعی استفاده می‌کند، تودرتویی نامعتبر همان‌گونه که یک مرورگر نرمال می‌کند نرمال می‌شود.

پرسش‌های پرتکرار

کدام ویژگی‌ها تغییر نام می‌یابند؟
class به className و for به htmlFor تبدیل می‌شوند؛ سایر ویژگی‌های دارای خط تیره یا رزرو‌شده camelCase می‌شوند (tabindex به tabIndex، ‏maxlength به maxLength، ‏stroke-width به strokeWidth). ویژگی‌های data-* و aria-* دقیقاً همان‌طور که نوشته شده‌اند حفظ می‌شوند.
استایل‌های inline چگونه مدیریت می‌شوند؟
یک رشته style="color:red;font-size:14px" به style={{ color: 'red', fontSize: '14px' }} تبدیل می‌شود — هر property CSS به camelCase درمی‌آید و هر مقدار به‌عنوان یک رشته تولید می‌شود، که همیشه برای استایل‌های inline در React معتبر است.
با چند عنصر ریشه چه اتفاقی می‌افتد؟
JSX به یک ریشه واحد نیاز دارد، پس وقتی قطعه شما چند گره سطح-بالا دارد، آن‌ها در یک Fragment (<>...</>) پیچیده می‌شوند. حالت کامپوننت-کامل به‌جای آن، آن‌ها را درون یک عبارت پرانتزی بازگشتی می‌پیچد.
آیا کامنت‌ها و تگ‌های void را تبدیل می‌کند؟
بله. کامنت‌های HTML به کامنت‌های JSX به‌شکل {/* ... */} تبدیل می‌شوند، و عناصر void (img, br, input, hr, meta, link و بقیه) به‌صورت خودبسته <img /> رندر می‌شوند، همان‌طور که JSX نیاز دارد.

ابزارهای بیشتر