الفرق بين المراجعتين ل"React/web components"

مراجعة 16:49، 16 سبتمبر 2018

إنّ مكوّنات 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 الرسمي.

@@ سطر 41: / سطر 41: @@
 </syntaxhighlight>'''ملاحظة:''' لن تعمل هذه الشيفرة إن نقلت الأصناف باستخدام Babel. انظر إلى هذه المشكلة [https://github.com/w3c/webcomponents/issues/587 من هنا]. يجب عليك تضمين <code>[https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs custom-elements-es5-adapter]</code> قبل تحميل مكوّنات الويب لإصلاح هذه المشكلة.
+== انظر أيضًا ==
+* [[React/jsx in depth|شرح JSX بالتفصيل]]
+* [[React/static type checking|التحقق من الأنواع الثابتة]]
+* [[React/typechecking with proptypes|التحقق من الأنواع باستخدام PropTypes]]
+* [[React/refs and the dom|استخدام المراجع مع DOM]]
+* [[React/uncontrolled components|المكونات غير المضبوطة]]
+* [[React/optimizing performance|تحسين الأداء]]
+* [[React/react without es6|React بدون ES6]]
+* [[React/react without jsx|React بدون JSX]]
+* [[React/reconciliation|المطابقة (Reconciliation)]]
+* [[React/context|استخدام السياق (Context) في React]]
+* [[React/fragments|استخدام الأجزاء (Fragments) في React]]
+* [[React/portals|المداخل (Portals) في React]]
+* [[React/error boundaries|حدود الأخطاء]]
+* React/web components|مكونات الويب (الصفحة الحالية)
+* [[React/higher order components|المكونات ذات الترتيب الأعلى]]
+* [[React/forwarding refs|تمرير المراجع]]
+* [[React/render props|خاصيات التصيير]]
+* [[React/integrating with other libraries|تكامل React مع المكتبات الأخرى]]
+* [[React/accessibility|سهولة الوصول]]
+* [[React/code splitting|تقسيم الشيفرة]]
+* [[React/strict mode|الوضع الصارم (Strict Mode)]]
 == مصادر==
 *[https://reactjs.org/docs/web-components.html صفحة مكونات الويب في توثيق React الرسمي].
 [[تصنيف:React]]