API Reference

React DOM Components

உலாவியில் உள்ளமைந்த அனைத்து HTML மற்றும் SVG components-ஐ React support செய்கிறது.

பொதுவான components

உலாவியில் உள்ளமைந்த அனைத்து components சில props மற்றும் events-ஐ support செய்கின்றன.

இதில் ref மற்றும் dangerouslySetInnerHTML போன்ற React-specific props அடங்கும்.

Form components

உலாவியில் உள்ளமைந்த இந்த components user input-ஐ ஏற்கின்றன:

இவை React-இல் சிறப்பு வாய்ந்தவை; ஏனெனில் value prop-ஐ இவற்றுக்கு pass செய்தால் அவை controlled ஆகும்.

Resource மற்றும் metadata components

உலாவியில் உள்ளமைந்த இந்த components external resources load செய்யவோ document-ஐ metadata உடன் annotate செய்யவோ உதவுகின்றன:

இவை React-இல் சிறப்பு வாய்ந்தவை; ஏனெனில் React அவற்றை document head-இல் render செய்யவும், resources load ஆகும் போது suspend செய்யவும், குறிப்பிட்ட ஒவ்வொரு component-ன் reference page-இல் விவரிக்கப்பட்டுள்ள பிற behaviors-ஐ செயல்படுத்தவும் முடியும்.

அனைத்து HTML components

உலாவியில் உள்ளமைந்த அனைத்து HTML components-ஐ React support செய்கிறது. இதில் அடங்குபவை:

Note

DOM standard போலவே, prop names-க்கு React camelCase convention-ஐப் பயன்படுத்துகிறது. உதாரணமாக, tabindex-க்கு பதிலாக tabIndex எழுதுவீர்கள். Existing HTML-ஐ JSX-ஆக மாற்ற online converter பயன்படுத்தலாம்.

Custom HTML elements

<my-element> போல dash கொண்ட tag-ஐ render செய்தால், நீங்கள் custom HTML element render செய்ய விரும்புகிறீர்கள் என்று React கருதும்.

உலாவியில் உள்ளமைந்த HTML element-ஐ is attribute உடன் render செய்தாலும், அது custom element ஆகவே நடத்தப்படும்.

Custom elements-இல் values set செய்தல்

Custom elements-க்கு data pass செய்ய இரண்டு முறைகள் உள்ளன:

  1. Attributes: Markup-இல் display ஆகும்; string values-க்கு மட்டுமே set செய்ய முடியும்
  2. Properties: Markup-இல் display ஆகாது; arbitrary JavaScript values-க்கு set செய்ய முடியும்

Default-ஆக, JSX-இல் bound செய்யப்பட்ட values-ஐ React attributes ஆக pass செய்யும்:

<my-element value="Hello, world!"></my-element>

Custom elements-க்கு pass செய்யப்படும் non-string JavaScript values default-ஆக serialize செய்யப்படும்:

// Will be passed as `"1,2,3"` as the output of `[1,2,3].toString()`
<my-element value={[1,2,3]}></my-element>

ஆனால் construction நேரத்தில் class-இல் property name தோன்றினால், custom element-ன் அந்த property arbitrary values pass செய்யக்கூடியது என்று React அறிந்துகொள்ளும்:

export class MyElement extends HTMLElement {
  constructor() {
    super();
    // The value here will be overwritten by React
    // when initialized as an element
    this.value = undefined;
  }

  connectedCallback() {
    this.innerHTML = this.value.join(", ");
  }
}

Custom elements-இல் events கேட்குதல்

Custom elements பயன்படுத்தும்போது பொதுவான pattern: event ஏற்படும் போது call செய்ய function ஏற்குவதற்குப் பதிலாக அவை CustomEvents dispatch செய்யலாம். JSX மூலம் event-க்கு bind செய்யும்போது on prefix பயன்படுத்தி இந்த events-ஐ listen செய்யலாம்.

export function App() {
  return (
    <my-element
      onspeak={e => console.log(e.detail.message)}
    ></my-element>
  )
}

Note

Events case-sensitive; dash (-) support செய்கின்றன. Custom element events-ஐ listen செய்யும்போது event casing-ஐ preserve செய்து அனைத்து dashes-ஐயும் சேர்க்கவும்:

// Listens for `say-hi` events
<my-element onsay-hi={console.log}></my-element>
// Listens for `sayHi` events
<my-element onsayHi={console.log}></my-element>

அனைத்து SVG components

உலாவியில் உள்ளமைந்த அனைத்து SVG components-ஐ React support செய்கிறது. இதில் அடங்குபவை:

Note

DOM standard போலவே, prop names-க்கு React camelCase convention-ஐப் பயன்படுத்துகிறது. உதாரணமாக, tabindex-க்கு பதிலாக tabIndex எழுதுவீர்கள். Existing SVG-ஐ JSX-ஆக மாற்ற online converter பயன்படுத்தலாம்.

Namespaced attributes-ஐயும் colon இல்லாமல் எழுத வேண்டும்:

  • xlink:actuate என்பது xlinkActuate ஆகும்.
  • xlink:arcrole என்பது xlinkArcrole ஆகும்.
  • xlink:href என்பது xlinkHref ஆகும்.
  • xlink:role என்பது xlinkRole ஆகும்.
  • xlink:show என்பது xlinkShow ஆகும்.
  • xlink:title என்பது xlinkTitle ஆகும்.
  • xlink:type என்பது xlinkType ஆகும்.
  • xml:base என்பது xmlBase ஆகும்.
  • xml:lang என்பது xmlLang ஆகும்.
  • xml:space என்பது xmlSpace ஆகும்.
  • xmlns:xlink என்பது xmlnsXlink ஆகும்.
PrevioususeFormStatus
NextCommon (e.g. <div>)