React/web components

إنّ مكوّنات React ومكوّنات الويب مبنية لحل مشاكل مختلفة. حيث تُزوِّدنا مكوّنات الويب بتغليف قوي لمكوّنات قابلة لإعادة الاستخدام، بينما تُزوِّدنا مكوّنات React بمكتبة تصريحات تُبقي DOM على تزامن مع بياناتنا. يكون هذا الهدفان متكاملين، وكمُطوّر لك حرية استخدام react في مكوّنات الويب لديك، أو استخدام مكوّنات الويب في React أو كليهما معًا.

معظم من يستخدم React لا يستخدم مكوّنات الويب، ولكن قد ترغب في ذلك خاصة إذا كنت تستخدم مكوّنات لواجهة المستخدم من طرف ثالث والتي تكون مكتوبة باستخدام مكوّنات الويب.

استخدام مكوّنات الويب في React

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

ملاحظة: تعرض مكوّنات الويب عادة واجهة برمجة تطبيقات (API) إلزاميّة. على سبيل المثال قد يُعرِّض مكوّن الويب video الدالتين play()‎ و pause()‎، وللوصول إلى واجهة برمجة التطبيقات الإلزامية لمكوّنات الويب ستحتاج إلى استخدام مرجع للتفاعل مع عقدة DOM مباشرةً. إن كنت تستخدم مكوّنات ويب من طرف ثالث فالحل الأمثل هو كتابة مكوّن React يسلك سلوك غلاف لمكوّنات الويب لديك.

الأحداث الصادرة من قبل مكوّن الويب قد لا تنتشر بشكل صحيح عبر شجرة تصيير React. ستحتاج إلى إرفاق معالج أحداث يدويًّا للتعامل مع هذه الأحداث ضمن مكوّنات React لديك.

إحدى الأمور التي من الشائع الخطأ بها هي استخدام مكوّنات الويب للخاصيّة class بدلًا من className:

function BrickFlipbox() {
  return (
    <brick-flipbox class="demo">
      <div>الواجهة الأمامية</div>
      <div>الواجهة الخلفية</div>
    </brick-flipbox>
  );
}

استخدام React في مكوّنات الويب لديك

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);
    ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
  }
}
customElements.define('x-search', XSearch);

ملاحظة: لن تعمل هذه الشيفرة إن نقلت الأصناف باستخدام Babel. انظر إلى هذه المشكلة من هنا. يجب عليك تضمين custom-elements-es5-adapter قبل تحميل مكوّنات الويب لإصلاح هذه المشكلة.

 مصادر

• صفحة مكونات الويب في توثيق React الرسمي.