Standalone
1.0.0
Erstellen Sie agnostische Framework -Komponenten, die mit allen Vorteilen des React -Ökosystems wirklich wiederverwendbar und interoperabel sind.
npm install react-standalone --save Schauen Sie sich die mars-weather -Komponente an, um eine Idee zu erhalten, wie Sie Ihre wiederverwendbare Komponente strukturieren können. Im Wesentlichen besteht eine Komponente jedoch aus einem Tag-Namen-wie mars-weather , der React- component und einem optionalen Schema mit osom .
import { createModule } from 'standalone' ;
import schema from './schema' ;
import component from './component' ;
export default createModule ( 'mars-weather' , { schema , component } ) ; Sobald Sie Ihr Paket erstellt haben, wird ein benutzerdefiniertes Element mit dem mitgelieferten tagName erstellt, der in das DOM eingebettet werden kann. Alle React -Lebenszyklus -Methoden werden aufgerufen, z componentWillUnmount
< mars-weather /> Da die mars-weather -Komponente ein völlig benutzerdefiniertes Element ist, kann sie in jedes JavaScript-Gerüst eingebettet werden-Angular, Vue, React, Cycle, Ember, Vanille usw.
Bonus: Verwenden Sie Keo mit Schattengrenzen für ein echtes polymerartiges Gefühl.
Durch Angeben von Attributen für das benutzerdefinierte Element werden die Werte der Attribute als Requisiten in Ihre Komponente übergeben-alle Änderungen am state werden intern an Ihre Komponente behandelt, während Änderungen an den Attributen Ihres Elements mit den aktualisierten props einen Neurender verursachen.
Im Beispiel für das mars-weather -Beispiel haben wir die Methode getDefaultProps eingerichtet, um die Standard-Requisiten zurückzugeben. Benutzer können jedoch die unit überschreiben, indem sie ein data mit dem Namen data-unit übergeben.
< mars-weather data-unit =" C " /> Im obigen Fall wird das data-unit -Attribut in unit -als Standalone data- -transformiert und dann Ihre Komponente erneut angeregt, sodass Sie auf das Attribut als this.props.unit zugreifen können.
Da alle HTML -Attribute string S sind, können Sie Standalone ein Schema für Ihre Komponente angeben, mit dem string -Attribute in den Datentyp, den Sie erwarten, mit osom erwarten.
export default {
unit : {
type : String ,
default : 'F'
}
} ; Sobald Sie das für Ihre Komponente verwendete Schema konfiguriert haben, können Sie die üblichen React propTypes gerne angeben, die den Datentyp angeben, den Sie erwarten.
Mit benutzerdefinierten Ereignissen können Sie einen Kommunikationskanal zwischen Ihren Komponenten und der Außenwelt problemlos einrichten.
// 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 ) ; Es ist entscheidend, dass Sie das Ereignis als bubbles: true Ansonsten würde das Ereignis einfach am findDOMNode(this) Knoten anhalten, anstatt sich auf den mars-weather mars-weather Knoten zu sprudeln- findDOMNode(this).parentNode
Innerhalb Ihrer Komponente geben Sie das Ereignis- CustomEvent -mit dispatchEvent aus und binden Sie dann Ihr benutzerdefiniertes Element-wie mars-weather -mit addEventListener von außen.
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 ) ;
} ) ; Da das Aufrufen setAttribute in Ihrer Komponente dazu führt, dass Sie Ihre Komponente neu reagieren, ist es möglicherweise nützlich, stattdessen eine JSON-Nutzlast an Ihre Komponente zu liefern-insbesondere wenn Sie eine Vielzahl von Attributen definieren. Dies hilft auch bei der Leistung, da Sie nur ein setAttribute benötigen, um viele Requisiten zu aktualisieren und erneut zu rendern.
Durch das Definieren eines Schemas können Sie ein Attribut angeben, das als JSON analysiert wird.
export default {
payload : {
type : JSON . parse
}
} this.props.payload PropTypes.shape eine JSON-Zeichenfolge an das data-payload -Attribut Ihres Elements anfügen, wird es mit JSON.parse in ein Objekt analysiert und an Ihre React propTypes Komponente übergeben.
Alle Standalone Komponenten erweitern HTMLElement.prototype und ermöglichen das Hinzufügen benutzerdefinierter Funktionen zum Element - die Sie aufrufen können, sobald Sie einen Verweis auf das zugehörige Element haben. Schauen Sie sich die Methoden von mars-weather für ein Beispiel an.
const getWeather = function ( ) {
const weather = this . component . state . weather . atmoOpacity . toLowerCase ( ) ;
return `The current weather on Mars is ${ weather } !` ;
} ;
// ...
document . querySelector ( 'mars-weather' ) . getWeather ( ) ; Wenn eine Komponente an das DOM angehängt wurde, aktualisiert sie ihren HTMLElement -Prototyp, um die state Komponente getPrototypeOf(this).component props .
Es ist erwähnenswert , dass this.component .
Mit der benutzerdefinierten Elemente -API ist es möglich, vorhandene Elemente zu erweitern - unter Verwendung des is -Attributs zu spezialisiert. Standalone können Sie Elemente erweitern, indem Sie das Element zum Ausdehnen übergeben.
// 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 } ) ; Es ist erwähnenswert, dass Ihr Element seinen Prototyp erweitert, wenn Sie ein bekanntes Element erweitern-im vorliegenden Fall des mars-weather -Elements input und seinen HTMLInputElement -Prototyp erweitert.
* Benötigt die ausgezeichnete Webcomponents-Lite.js Polyfill (13K GZIPPED)
