Veb Komponentlər

React və Veb Komponentlər müxtəlif problemləri həll etmək üçün qurulub. Veb Komponentlər yenidən istifadə oluna bilən komponentlər üçün güclü inkapsulyasiyanı dəstəkləyir. React isə DOM-u sizin məlumatlarınızı sinxronlaşdıran deklarativ kitabxana təmin edir. Bu məqsədlər tamamlayıcıdırlar. Developer kimi siz Veb Komponentlərinizdə React istifadə edə bilər və ya React-də Veb Komponentlər istifadə edə bilərsiniz, və ya hər ikisini.

React istifadə edənlərin çoxu Veb Komponentlər istifadə etmir, amma siz istifadə etmək istəyə bilərsiniz. Xüsusilə, əgər siz Veb Komponentlərin istifadəsi üçün yazılmış üçüncü tərəf UI komponentləri istifadə edirsinizsə.

React-də Veb Komponentlərin İstifadəsi

class HelloMessage extends React.Component {
  render() {
    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
  }
}

Qeyd:

Veb Komponentlər çox vaxt imperativ API-ı göstərir. Məsələn, video Veb Komponenti play() və pause() funksiyalarını göstərə bilər. Veb Komponentin interaktiv API-ına daxil olmaq üçün siz DOM nodla birdəfəlik əlaqəyə girən ref işlətməli olacaqsınız. Əgər siz üçüncü tərəf Veb Komponentlərini istifadə edirsinizsə, ən yaxşı həll sizin Veb Komponentinizi əhatə edən funksiyasını daşıyan React komponenti yazmaqdır.

Veb komponentlər tərəfindən yayılmış hadisələr React render ağacından düzgün ötməyə bilər. Siz React komponentlərinizdə bu hadisələri idarə etmək üçün əllə (manually) hadisə işləyicilərini qoşmalısınız.

Bir ümumi çaşqınlıq odur ki, Veb Komponentlər “className” əvəzinə “class” işlədirlər.

function BrickFlipbox() {
  return (
    <brick-flipbox class="demo">
      <div>front</div>
      <div>back</div>
    </brick-flipbox>
  );
}

Sizin Veb Komponentlərinizdə React-in İşlənməsi

class XSearch extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

    const name = this.getAttribute('name');
    const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
    const root = ReactDOM.createRoot(mountPoint);
    root.render(<a href={url}>{name}</a>);
  }
}
customElements.define('x-search', XSearch);

Qeyd:

Babel ilə bu kod siniflərini çevirsəniz işləməyəcək. Bu problemə müzakirə üçün baxın. Bu problemi həll etmək üçün veb komponentinizi yükləməmişdən öncə custom-elements-es5-adapter-i daxil edin.