string dom تحميل - string dom تنزيل كود المصدر

string dom

مكونات الطرف الثالث

v0.0.6

تنزيل

سلسلة دوم

قم بإنشاء سلاسل HTML باستخدام JSX (أو الوظائف).

عن

string-dom هي دالة تقوم بإنشاء سلسلة HTML.

تم تصميمه للعمل مع JSX، ولكنه يُصيِّره إلى سلسلة نصية، بدلًا من DOM .
باستخدام string-dom ، تصبح JSX لغة قوالب HTML يمكن استخدامها بشكل منفصل عن React.

ثَبَّتَ

$ npm i string-dom --save

الاستخدام

 import sd from 'string-dom'

/** @jsx sd */

// with JSX
// note the comment above, and see the link below
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#custom
document . body . innerHTML += (
  < div class = "wrapper" >
    < h1 class = "heading" data-heading = "data-heading" > Heading Text </ h1 >
    < p class = "heading-sub" data-subheading = "data-subheading" > Subheading Text </ p >
    < p > An element without attributes. </ p >
  </ div >
)

// without JSX
document . body . innerHTML += (
  sd ( 'div' , { class : 'wrapper' } ,
    sd ( 'h1' , { class : 'heading' , 'data-heading' : 'data-heading' } , 'Heading Text' ) ,
    sd ( 'p' , { class : 'heading-sub' , 'data-subheading' : 'data-subheading' } , 'Subheading Text' ) ,
    sd ( 'p' , 'An element without attributes.' )
  )
)

يقوم كل مما سبق بإنشاء HTML التالي (كسلسلة)، ثم إضافته إلى body :

 < div class =" wrapper " >
  < h1 class =" heading " data-heading =" data-heading " > Heading Text </ h1 >
  < p class =" heading-sub " data-subheading =" data-subheading " > Subheading Text </ p >
  < p > An element without attributes. </ p >
</ div >