تنزيل Standalone - تنزيل رمز المصدر Standalone

Standalone

مكونات الطرف الثالث

1.0.0

تنزيل

رد فعل مستقل

قم بإنشاء مكونات لاأدري إطار قابلة لإعادة الاستخدام حقًا وقابلة للتشغيل مع جميع فوائد النظام الإيكولوجي React - باستخدام API HTML5 Custom Elements لتوسيع مفردات HTML.

NPM: npm install react-standalone --save

جدول المحتويات

ابدء
التعامل مع الدعائم
- تحديد مخطط
أحداث المكون
- تمرير هيكل JSON
طرق العناصر
تمديد العناصر
دعم المتصفح

ابدء

ألقِ نظرة على مكون mars-weather لفكرة حول كيفية تنظيم مكونك القابل لإعادة الاستخدام-ومع ذلك ، يتكون مكون من اسم العلامة-مثل mars-weather ، component React ومخطط اختياري باستخدام osom .

 import { createModule } from 'standalone' ;
import schema from './schema' ;
import component from './component' ;

export default createModule ( 'mars-weather' , { schema , component } ) ;

بمجرد إنشاء الحزمة الخاصة بك ، سيتم إنشاء عنصر مخصص باستخدام tagName المرفق والذي يمكن تضمينه في DOM - سيتم استدعاء جميع طرق دورة حياة رد الفعل ، مثل componentWillUnmount عند إزالة العنصر من DOM.

 < mars-weather />

نظرًا لأن مكون mars-weather عنصر مخصص تمامًا ، يمكن تضمينه في أي إطار JavaScript-الزاوي ، Vue ، React ، Cycle ، Ember ، Vanilla ، إلخ ...

المكافأة: استخدم KEO مع حدود الظل للحصول على شعور بوليمر حقيقي.

التعامل مع الدعائم

من خلال تحديد السمات على العنصر المخصص ، يتم تمرير قيم السمات إلى مكونك كدعائم-سيتم التعامل مع أي تغييرات على state داخليًا مع المكون ، في حين أن أي تغييرات على سمات العنصر الخاص بك ستتسبب في إعادة تقديم مع props المحدثة.

في مثال mars-weather ، قمنا بإعداد طريقة getDefaultProps لإرجاع الدعائم الافتراضية ، ومع ذلك يمكن للمستخدمين تجاوز دعامة unit عن طريق تمرير سمة data تسمى data-unit .

 < mars-weather data-unit =" C " />

في الحالة المذكورة أعلاه ، سيتم تحويل سمة data-unit إلى unit -حيث تقوم بتعيين أي بادئات data- Standalone -ثم إعادة تقديم المكون الخاص بك ، مما يسمح لك بالوصول إلى السمة مثل this.props.unit .

تحديد مخطط

نظرًا لأن جميع سمات HTML عبارة عن string S ، يتيح لك Standalone تحديد مخطط للمكون الخاص بك ، والذي سيحول سمات string إلى نوع البيانات الذي تتوقعه باستخدام osom .

 export default {
    unit : {
        type : String ,
        default : 'F'
    }
} ;

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

أحداث المكون

باستخدام الأحداث المخصصة ، يمكنك بسهولة إعداد قناة اتصال بين مكوناتك والعالم الخارجي.

 // Instantiate `CustomEvent` and then specify the name of the event, followed
// by the payload which will be passed to your listener function.
const event = new CustomEvent ( 'migrate-planets' , {
    bubbles : true ,
    detail : {
        planet : 'Saturn'
    }
} ) ;

findDOMNode ( this ) . dispatchEvent ( event ) ;

من الأهمية بمكان أن تنبعث من الحدث على أنه bubbles: true أن الحدث سيتوقف ببساطة في عقدة findDOMNode(this) بدلاً من أن تصل إلى عقدة mars-weather -إلا إذا قمت بإرسال الحدث على عقدة mars-weather باستخدام findDOMNode(this).parentNode .

ضمن المكون الخاص بك ، تنبعث من الحدث- CustomEvent باستخدام dispatchEvent ثم ربط العنصر المخصص الخاص بك-مثل mars-weather باستخدام addEventListener من الخارج.

 const node = document . querySelector ( 'mars-weather' ) ;

node . addEventListener ( 'migrate-planets' , event => {

    // Update the `data-planet` attribute to reflect the newly migrated planet
    // which will cause the component to re-render with the update prop.
    node . setAttribute ( 'data-planet' , event . detail . planet ) ;

} ) ;

تمرير هيكل JSON

نظرًا لاستدعاء setAttribute على مكونك ، يتفاعل مكونك لإعادة تقديم المكون الخاص بك ، فقد يكون من المفيد توفير حمولة JSON لمكونك بدلاً من ذلك-خاصة إذا كنت تحدد العديد من السمات ؛ يساعد هذا أيضًا في الأداء لأنك ستحتاج فقط إلى setAttribute لتحديث العديد من الدعائم وإعادة تقديمها.

من خلال تحديد مخطط ، يمكنك تحديد سمة سيتم تحليلها باسم JSON.

 export default {
    payload : {
        type : JSON . parse
    }
}

سيؤدي إرفاق سلسلة JSON إلى سمة data-payload العنصر إلى تحليلها في كائن باستخدام JSON.parse ، وتم نقله إلى مكون React الخاص بك مثل this.props.payload الذي يمكن تعريفه في propTypes باستخدام PropTypes.shape .

طرق العناصر

جميع المكونات Standalone تمدد HTMLElement.prototype وتسمح بإضافة وظائف مخصصة إلى العنصر - والتي يمكنك استدعاءها بمجرد أن يكون لديك إشارة إلى العنصر المرتبط. ألقِ نظرة على أساليب mars-weather على سبيل المثال.

 const getWeather = function ( ) {
    const weather = this . component . state . weather . atmoOpacity . toLowerCase ( ) ;
    return `The current weather on Mars is ${ weather } !` ;
} ;

// ...

document . querySelector ( 'mars-weather' ) . getWeather ( ) ;

عندما يتم إلحاق أحد المكون بـ DOM ، فإنه سيقوم بتحديث النموذج الأولي HTMLElement الخاص به لتعيين المكون المقدم إلى getPrototypeOf(this).component - يتيح لك ذلك بسهولة الوصول إلى props state ، واستدعاء الوظائف الداخلية لمكون React.

تجدر الإشارة إلى أن this.component سيكون متاحًا فقط بمجرد إلحاق المكون بـ DOM.

تمديد العناصر

مع API العناصر المخصصة ، من الممكن تمديد العناصر الموجودة - باستخدام سمة is إلى التخصص. يتيح لك Standalone تمديد العناصر عن طريق تمرير العنصر لتمديده.

 // Creates a `mars-weather` element.
export default createModule ( 'mars-weather' , { schema , methods , component } ) ;

// Creates a `input[is="mars-weather"]` element.
export default createModule ( 'input/mars-weather' , { schema , methods , component } ) ;

تجدر الإشارة إلى أنه عند توسيع عنصر معروف ، سيقوم عنصرك بتوسيع نموذجه الأولي-في الحالة فوق عنصر mars-weather ستعمل input ونموذج HTMLInputElement الخاص به.