Standaloneダウンロード - Standaloneソースコードのダウンロード

Standalone

サードパーティ製コンポーネント

1.0.0

ダウンロード

反応スタンドアロン

HTML5カスタム要素APIを使用してHTMLの語彙を拡張するために、Reactエコシステムのすべての利点と真に再利用可能で相互運用可能なフレームワークのアグノーシスコンポーネントを作成します。

NPM： npm install react-standalone --save

はじめる

mars-weatherコンポーネントをご覧ください。再利用可能なコンポーネントを構成する方法については、基本的にコンポーネントは、 mars-weather 、React component 、 osomを使用したオプションスキーマなどのタグ名で構成されています。

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

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

パッケージを作成すると、DOMに埋め込むことができる供給されたtagNameでカスタム要素が作成されます。これは、要素がDOMから削除されたときのcomponentWillUnmountなど、すべてのReactライフサイクルメソッドが呼び出されます。

 < mars-weather />

mars-weatherコンポーネントは完全にカスタム要素であるため、Angular、Vue、React、Cycle、Ember、Vanillaなど、JavaScriptフレームワークに埋め込むことができます...

ボーナス：真のポリマー風の感触のために、影の境界でKEOを使用します。

小道具の処理

カスタム要素に属性を指定することにより、属性の値がプロップとしてコンポーネントに渡されます。 stateの変更はコンポーネントに内部的に処理されますが、要素の属性の変更は更新されたpropsと再レンダリングを引き起こします。

mars-weather例では、 getDefaultPropsメソッドをセットアップしてデフォルトのプロップを返しますが、ユーザーはdata-unitという名前の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'
    }
} ;

コンポーネントに使用するスキーマを構成したら、渡されると予想されるデータ型を指定する通常のReact 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でなければ、イベントはmars-weather mars-weatherまで泡立つのではなく、 findDOMNode(this) 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を呼び出すと、コンポーネントを再レンダリングするためにReactを引き起こすため、特に多数の属性を定義している場合は、代わりにJSONペイロードをコンポーネントに提供することが役立つ場合があります。これは、多くの小道具を更新して再レンダリングするために1つのsetAttributeが必要なため、パフォーマンスにも役立ちます。

スキーマを定義することにより、JSONとして解析される属性を指定できます。

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

JSON文字列を要素のdata-payload属性に添付すると、 JSON.parseを使用してオブジェクトに解析され、 PropTypes.shapeを使用してthis.props.payloadで定義できるように対応propTypesに渡されます。

要素メソッド

すべての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プロトタイプを更新して、レンダリングさprops stateコンポーネントをgetPrototypeOf(this).componentに割り当てます。

this.component componentは、コンポーネントがDOMに追加されたらのみ利用可能になることに注意してください。

拡張要素

Custom Elements 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 } ) ;