Standalone
1.0.0
Crie componentes agnósticos da estrutura que são verdadeiramente reutilizáveis e interoperáveis com todos os benefícios do ecossistema React - usando a API de elementos personalizados HTML5 para estender o vocabulário do HTML.
npm install react-standalone --save Dê uma olhada no componente mars-weather para uma idéia de como estruturar seu componente reutilizável-porém essencialmente um componente consiste em um nome de tag-como mars-weather , o component React e um esquema opcional usando osom .
import { createModule } from 'standalone' ;
import schema from './schema' ;
import component from './component' ;
export default createModule ( 'mars-weather' , { schema , component } ) ; Depois de criar seu pacote, um elemento personalizado será criado com o tagName fornecido que pode ser incorporado ao DOM - todos os métodos do ciclo de vida do React serão invocados, como componentWillUnmount quando o elemento for removido do DOM.
< mars-weather /> Como o componente de mars-weather é um elemento totalmente personalizado, ele pode ser incorporado em qualquer estrutura de JavaScript-angular, vue, reação, ciclo, brasa, baunilha, etc ...
Bônus: use Keo com limites de sombra para uma verdadeira sensação de polímero.
Ao especificar atributos no elemento personalizado, os valores dos atributos são transmitidos para o seu componente como adereços-quaisquer alterações no state serão tratadas internamente ao seu componente, enquanto quaisquer alterações nos atributos do seu elemento causarão uma renderização com os props atualizados.
No exemplo de mars-weather , configuramos o método getDefaultProps para retornar os adereços padrão, no entanto, os usuários podem substituir o suporte unit passando em um atributo data chamado data-unit .
< mars-weather data-unit =" C " /> No caso acima, o atributo data-unit será transformado na unit -à medida que Standalone retirarem os prefixos data- -e depois renderizam seu componente, permitindo que você acesse o atributo this.props.unit .
Como todos os atributos HTML são string , Standalone permite especificar um esquema para o seu componente, que transformará os atributos string no tipo de dados que você espera usando osom .
export default {
unit : {
type : String ,
default : 'F'
}
} ; Depois de configurar o esquema para usar para o seu componente, você pode configurar com prazer o reacto usual do React propTypes especificando o tipo de dados que você espera ser passado.
Usando eventos personalizados, você pode configurar facilmente um canal de comunicação entre seus componentes e o mundo exterior.
// 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 ) ; É crucial que você emite o evento como bubbles: true , caso contrário, o evento simplesmente interrompeu no nó findDOMNode(this) em vez de borbulhar até o nó mars-weather -a menos que você envie o evento no nó mars-weather usando findDOMNode(this).parentNode .
Dentro do seu componente, você emite o evento- CustomEvent -usando dispatchEvent e, em seguida, vincula seu elemento personalizado-como mars-weather -usando addEventListener de fora.
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 ) ;
} ) ; Como invocar setAttribute em seu componente faz com que reaja a renderização de seu componente, pode ser útil fornecer uma carga útil JSON ao seu componente-especialmente se você estiver definindo uma infinidade de atributos; Isso também ajuda no desempenho, pois você precisaria apenas de um setAttribute para atualizar muitos adereços e renderizar novamente.
Ao definir um esquema, você pode especificar um atributo que será analisado como JSON.
export default {
payload : {
type : JSON . parse
}
} A anexação de uma string json ao atributo de data-payload do seu elemento fará com que ele seja analisado em um objeto usando JSON.parse e transmitido ao seu componente React como this.props.payload , que pode ser definido nos propTypes usando PropTypes.shape .
Todos os componentes Standalone estendem HTMLElement.prototype e permitem adicionar funções personalizadas ao elemento - que você pode invocar depois de ter uma referência ao elemento associado. Dê uma olhada nos métodos de mars-weather para um exemplo.
const getWeather = function ( ) {
const weather = this . component . state . weather . atmoOpacity . toLowerCase ( ) ;
return `The current weather on Mars is ${ weather } !` ;
} ;
// ...
document . querySelector ( 'mars-weather' ) . getWeather ( ) ; Quando um componente for anexado ao DOM, ele atualizará seu protótipo HTMLElement para atribuir o componente renderizado para getPrototypeOf(this).component - isso permite convenientemente acessar os props e state e invocar funções internas ao componente React.
Vale a pena notar que this.component só estará disponível quando o componente for anexado ao DOM.
Com a API de elementos personalizados, é possível estender os elementos existentes - usando o atributo is para especializar. Standalone permite estender elementos passando o elemento a se estender.
// 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 } ) ; Vale a pena notar que, quando você estende um elemento conhecido, seu elemento estenderá seu protótipo-no caso acima do elemento mars-weather estenderá input e seu protótipo HTMLInputElement .
* Requer o excelente webcomponents-lite.js Polyfill (13k gzipped)
