Standalone
1.0.0
Buat kerangka kerja komponen agnostik yang benar -benar dapat digunakan kembali dan dapat dioperasikan dengan semua manfaat dari reaksi ekosistem - menggunakan HTML5 Elements Custom Elements API untuk memperluas kosa kata HTML.
npm install react-standalone --save Lihatlah komponen mars-weather untuk ide tentang cara menyusun komponen Anda yang dapat digunakan kembali-namun pada dasarnya komponen terdiri dari nama tag-seperti mars-weather , component reaksi dan skema opsional menggunakan osom .
import { createModule } from 'standalone' ;
import schema from './schema' ;
import component from './component' ;
export default createModule ( 'mars-weather' , { schema , component } ) ; Setelah Anda membuat paket Anda, elemen khusus akan dibuat dengan tagName yang disediakan yang dapat disematkan ke dalam DOM - semua metode siklus hidup React akan dipanggil, seperti componentWillUnmount ketika elemen telah dihapus dari DOM.
< mars-weather /> Karena komponen mars-weather adalah elemen yang sepenuhnya khusus, dapat disematkan dalam kerangka JavaScript apa pun -Angular, Vue, React, Cycle, Ember, Vanilla, dll ...
Bonus: Gunakan keo dengan batas bayangan untuk nuansa polimer-esque sejati.
Dengan menentukan atribut pada elemen khusus, nilai-nilai atribut diteruskan ke dalam komponen Anda sebagai alat peraga-setiap perubahan pada state akan ditangani secara internal ke komponen Anda, sedangkan setiap perubahan pada atribut elemen Anda akan menyebabkan re-render dengan props yang diperbarui.
Dalam contoh mars-weather , kami telah mengatur metode getDefaultProps untuk mengembalikan alat peraga default, namun pengguna dapat mengganti unit prop dengan meneruskan atribut data bernama data-unit .
< mars-weather data-unit =" C " /> Dalam kasus di atas, atribut data-unit akan ditransformasikan menjadi unit -karena Standalone strip setiap awalan data- -dan kemudian membuat ulang komponen Anda, memungkinkan Anda untuk mengakses atribut sebagai this.props.unit .
Karena semua atribut HTML adalah string S, Standalone memungkinkan Anda untuk menentukan skema untuk komponen Anda, yang akan mengubah atribut string menjadi tipe data yang Anda harapkan menggunakan osom .
export default {
unit : {
type : String ,
default : 'F'
}
} ; Setelah Anda mengkonfigurasi skema untuk digunakan untuk komponen Anda, Anda dapat dengan senang hati mengatur propTypes reaksi yang biasa menentukan tipe data yang Anda harapkan akan dilewati.
Menggunakan acara khusus Anda dapat dengan mudah mengatur saluran komunikasi antara komponen Anda dan dunia luar.
// 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 ) ; Sangat penting bagi Anda untuk memancarkan acara tersebut sebagai bubbles: true jika tidak, acara tersebut hanya akan berhenti di simpul findDOMNode(this) daripada menggelembung ke simpul mars-weather -kecuali jika Anda mengirim acara pada simpul mars-weather dengan menggunakan findDOMNode(this).parentNode .
Dalam komponen Anda, Anda memancarkan acara- CustomEvent -menggunakan dispatchEvent dan kemudian mengikat elemen khusus Anda-seperti mars-weather -menggunakan addEventListener dari luar.
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 ) ;
} ) ; Sebagai pemohon setAttribute pada komponen Anda menyebabkan bereaksi untuk merenderkan kembali komponen Anda, mungkin berguna untuk memasok muatan JSON ke komponen Anda sebagai gantinya-terutama jika Anda mendefinisikan banyak atribut; Ini juga membantu dengan kinerja karena Anda hanya membutuhkan satu setAttribute untuk memperbarui banyak alat peraga dan render ulang.
Dengan mendefinisikan skema, Anda dapat menentukan atribut yang akan diuraikan sebagai JSON.
export default {
payload : {
type : JSON . parse
}
} Melampirkan string JSON ke atribut data-payload elemen Anda akan menyebabkannya diuraikan menjadi objek menggunakan JSON.parse , dan diteruskan ke komponen reaksi Anda sebagai this.props.payload yang dapat didefinisikan dalam propTypes menggunakan PropTypes.shape .
Semua komponen Standalone memperluas HTMLElement.prototype dan memungkinkan untuk menambahkan fungsi khusus ke elemen - yang dapat Anda panggil setelah Anda memiliki referensi ke elemen yang terkait. Lihatlah metode mars-weather sebagai contoh.
const getWeather = function ( ) {
const weather = this . component . state . weather . atmoOpacity . toLowerCase ( ) ;
return `The current weather on Mars is ${ weather } !` ;
} ;
// ...
document . querySelector ( 'mars-weather' ) . getWeather ( ) ; Ketika komponen telah ditambahkan ke DOM, ia akan memperbarui prototipe HTMLElement -nya untuk menetapkan komponen yang diberikan untuk getPrototypeOf(this).component - ini dengan mudah memungkinkan Anda untuk mengakses props dan state , dan memohon fungsi internal ke komponen reaksi.
Perlu dicatat bahwa this.component hanya akan tersedia setelah komponen telah ditambahkan ke DOM.
Dengan API Elemen Kustom, dimungkinkan untuk memperluas elemen yang ada - menggunakan atribut is untuk berspesialisasi. Standalone memungkinkan Anda untuk memperluas elemen dengan melewati elemen untuk memperpanjang.
// 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 } ) ; Perlu dicatat bahwa ketika Anda memperluas elemen yang diketahui, elemen Anda akan memperpanjang prototipe-dalam kasus di atas elemen mars-weather akan memperpanjang input dan prototipe HTMLInputElement -nya.
* Membutuhkan WebComponent-lite.js Polyfill yang sangat baik (13K Gzipped)
