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

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (تحديث الصفحة، والعنوان، والتصنيفات)
 
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:مكونات الويب}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:مكونات الويب في React}}</noinclude>
 
إنّ مكوّنات React و[https://developer.mozilla.org/en-US/docs/Web/Web_Components مكوّنات الويب] مبنية لحل مشاكل مختلفة. حيث تُزوِّدنا مكوّنات الويب بتغليف قوي لمكوّنات قابلة لإعادة الاستخدام، بينما تُزوِّدنا مكوّنات React بمكتبة تصريحات تُبقي DOM على تزامن مع بياناتنا. يكون هذا الهدفان متكاملين، وكمُطوّر لك حرية استخدام React في مكوّنات الويب لديك، أو استخدام مكوّنات الويب في React أو كليهما معًا.
 
إنّ مكوّنات React و[https://developer.mozilla.org/en-US/docs/Web/Web_Components مكوّنات الويب] مبنية لحل مشاكل مختلفة. حيث تُزوِّدنا مكوّنات الويب بتغليف قوي لمكوّنات قابلة لإعادة الاستخدام، بينما تُزوِّدنا مكوّنات React بمكتبة تصريحات تُبقي DOM على تزامن مع بياناتنا. يكون هذا الهدفان متكاملين، وكمُطوّر لك حرية استخدام React في مكوّنات الويب لديك، أو استخدام مكوّنات الويب في React أو كليهما معًا.
  
سطر 55: سطر 55:
 
* [[React/portals|المداخل (Portals) في React]]
 
* [[React/portals|المداخل (Portals) في React]]
 
* [[React/error boundaries|حدود الأخطاء]]
 
* [[React/error boundaries|حدود الأخطاء]]
* مكونات الويب (الصفحة الحالية)
 
 
* [[React/higher order components|المكونات ذات الترتيب الأعلى]]
 
* [[React/higher order components|المكونات ذات الترتيب الأعلى]]
 
* [[React/forwarding refs|تمرير المراجع]]
 
* [[React/forwarding refs|تمرير المراجع]]
سطر 67: سطر 66:
 
*[https://reactjs.org/docs/web-components.html صفحة مكونات الويب في توثيق React الرسمي].
 
*[https://reactjs.org/docs/web-components.html صفحة مكونات الويب في توثيق React الرسمي].
 
[[تصنيف:React]]
 
[[تصنيف:React]]
 +
[[تصنيف:React Advanced Guides]]

المراجعة الحالية بتاريخ 13:27، 23 فبراير 2019

إنّ مكوّنات 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 قبل تحميل مكوّنات الويب لإصلاح هذه المشكلة.

انظر أيضًا

 مصادر