ดาวน์โหลด Standalone - ดาวน์โหลดซอร์สโค้ด Standalone

Standalone

ส่วนประกอบของบุคคลที่สาม

1.0.0

ดาวน์โหลด

ทำปฏิกิริยาแบบสแตนด์อโลน

สร้างส่วนประกอบผู้ไม่เชื่อเรื่องพระเจ้าที่สามารถนำกลับมาใช้ใหม่ได้อย่างแท้จริงและทำงานร่วมกันได้กับประโยชน์ทั้งหมดของระบบนิเวศปฏิกิริยา - โดยใช้ HTML5 Custom Elements API เพื่อขยายคำศัพท์ของ HTML

NPM: npm install react-standalone --save

สารบัญ

เริ่มต้น
การจัดการอุปกรณ์ประกอบฉาก
- การระบุสคีมา
เหตุการณ์ส่วนประกอบ
- ผ่านโครงสร้าง JSON
วิธีการ
การขยายองค์ประกอบ
การสนับสนุนเบราว์เซอร์

เริ่มต้น

ลองดูที่ส่วนประกอบของ mars-weather สำหรับแนวคิดเกี่ยวกับวิธีการจัดโครงสร้างส่วนประกอบที่นำกลับมาใช้ใหม่ของคุณได้-โดยพื้นฐานแล้ว ส่วนประกอบ ประกอบด้วยชื่อแท็ก-เช่น mars-weather component ปฏิกิริยาและสคีมาเสริมโดยใช้ osom

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

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

เมื่อคุณสร้างแพ็คเกจของคุณองค์ประกอบที่กำหนดเองจะถูกสร้างขึ้นด้วย tagName ที่ให้มาซึ่งสามารถฝังลงใน DOM - วิธีการตอบสนองตลอดชีวิตของ React จะถูกเรียกใช้เช่น componentWillUnmount เมื่อองค์ประกอบถูกลบออกจาก DOM

 < mars-weather />

เนื่องจากองค์ประกอบของ mars-weather เป็นองค์ประกอบที่กำหนดเองทั้งหมดจึงสามารถฝังอยู่ในกรอบ JavaScript ใด ๆ -Angular, Vue, React, Cycle, Ember, Vanilla, ฯลฯ ...

โบนัส: ใช้ KEO กับขอบเขตเงาเพื่อให้รู้สึกถึงพอลิเมอร์ที่แท้จริง

การจัดการอุปกรณ์ประกอบฉาก

โดยการระบุแอตทริบิวต์เกี่ยวกับองค์ประกอบที่กำหนดเองค่าของแอตทริบิวต์จะถูกส่งผ่านไปยังส่วนประกอบของคุณเป็นอุปกรณ์ประกอบฉาก-การเปลี่ยนแปลงใด ๆ ใน state จะถูกจัดการภายในกับส่วนประกอบของคุณในขณะที่การเปลี่ยนแปลงใด ๆ ในแอตทริบิวต์องค์ประกอบของคุณจะทำให้เกิดการเรนเด props ร์อีกครั้ง

ในตัวอย่างของ mars-weather เราได้ตั้งค่าวิธี getDefaultProps เพื่อส่งคืนอุปกรณ์ประกอบฉากเริ่มต้นอย่างไรก็ตามผู้ใช้สามารถแทนที่ unit Prop โดยส่งผ่านแอตทริบิวต์ data ชื่อ data-unit

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

ในกรณีข้างต้นแอตทริบิวต์ data-unit จะถูกแปลงเป็น unit -เป็น Standalone แถบคำนำหน้า data- ใด ๆ-จากนั้นแสดงส่วนประกอบของคุณอีกครั้งเพื่อให้คุณสามารถเข้าถึงแอตทริบิวต์ได้เช่นนี้ this.props.unit

การระบุสคีมา

เนื่องจากแอตทริบิวต์ HTML ทั้งหมด เป็น string S Standalone ช่วยให้คุณระบุสคีมาสำหรับส่วนประกอบของคุณซึ่งจะแปลงแอตทริบิวต์ string เป็นชนิดข้อมูลที่คุณคาดหวังโดยใช้ osom

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

เมื่อคุณกำหนดค่าสคีมาให้ใช้สำหรับส่วนประกอบของคุณแล้วคุณสามารถตั้งค่า propTypes เรียลเรียลตามปกติได้อย่างมีความสุขที่ระบุประเภทข้อมูลที่คุณคาดหวังว่าจะถูกส่งผ่าน

เหตุการณ์ส่วนประกอบ

การใช้กิจกรรมที่กำหนดเองคุณสามารถตั้งค่าช่องทางการสื่อสารระหว่างส่วนประกอบและโลกภายนอกได้อย่างง่ายดาย

 // 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 บนส่วนประกอบของคุณทำให้เกิดปฏิกิริยาตอบสนองต่อการแสดงผลส่วนประกอบของคุณอีกครั้งมันอาจเป็นประโยชน์ในการจัดหา Payload 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 ได้อย่างสะดวกสบาย

เป็นที่น่าสังเกตว่า 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