Feliz: [<importedreactcomponent from="bar">]</importedreactcomponent>

Créé le 12 déc. 2020  ·  6Commentaires  ·  Source: Zaid-Ajaj/Feliz

Il faudrait ajouter un attribut supplémentaire pour modéliser les composants importés et donc les mêmes transformations dans le site d'appel. Nous pouvons donc utiliser facilement des arguments facultatifs ou des accessoires d'enregistrement (anonymes):

type ExternalModule =
    [<ImportedReactComponent("AnotherComponent", from="external-module")>]
    static member Component(name: string, flag: bool): ReactElement = jsNative

[<ImportedReactComponent("AnotherComponent", from="external-module")>]
let AnotherComponent (props: {| foo: int; bar: string |}): ReactElement = jsNative 

C'est pour ne pas oublier, je vais essayer d'envoyer un PR moi-même.

Commentaire le plus utile

@alfonsogarciacaro a publié Feliz v1.25 qui devrait vous permettre d'écrire

[<ReactComponent(import="Hello", from="external-module")>]
let HelloWrapper (name: string) (children: ReactElement []) = Html.none

Où le corps du HelloWrapper renvoie null car on ne peut pas se débarrasser de la déclaration et sur le site d'appel, la fonction importée est utilisée à la place avec les paramètres appliqués

Tous les 6 commentaires

Oh ce serait vraiment cool

Pourquoi ne pas utiliser le même attribut ?

// import { AnotherComponent } from "external-module"; 
[<ReactComponent(import="AnotherComponent", from="external-module")>]
let Component(name: string, flag: bool): ReactElement = jsNative

// import Component from "external-module"
[<ReactComponent(importDefaultFrom="external-module")>]
let Component(name: string, flag: bool): ReactElement = jsNative

Personnellement, j'aime mieux ça, qu'en pensez-vous?

ça devrait marcher aussi

Mon futur moi me dit simplement qu'il pourrait y avoir un problème à l'avenir si nous voulons faire fonctionner les plugins dans le REPL, car actuellement j'utilise System.Activator pour initialiser le plugin et dans Fable cela ne fonctionne qu'avec le primaire constructeur. Mais les arguments facultatifs ne sont pas autorisés pour les constructeurs d'attributs, nous devons donc utiliser plusieurs constructeurs.

Quoi qu'il en soit, il ne sera pas toujours possible d'éviter les attributs avec plusieurs constructeurs (nous les utilisons déjà) et je suis sûr que nous pourrons trouver une solution de contournement le moment venu 😸

Au cas où vous utiliseriez un attribut séparé, je suggérerais d'utiliser un verbe à la place : [<ImportReactComponent>] .
Cela le maintiendrait cohérent avec les attributs d'interopérabilité JS (comme [<ImportDefault>] ).

@VitalyBrusentsev Je pense que je vais essayer de nouveaux paramètres dans le même [<ReactComponent>] à essayer au lieu d'un nouvel attribut

@alfonsogarciacaro je l'essaye en ce moment

@alfonsogarciacaro a publié Feliz v1.25 qui devrait vous permettre d'écrire

[<ReactComponent(import="Hello", from="external-module")>]
let HelloWrapper (name: string) (children: ReactElement []) = Html.none

Où le corps du HelloWrapper renvoie null car on ne peut pas se débarrasser de la déclaration et sur le site d'appel, la fonction importée est utilisée à la place avec les paramètres appliqués

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

Shmew picture Shmew  ·  25Commentaires

cmeeren picture cmeeren  ·  19Commentaires

cmeeren picture cmeeren  ·  25Commentaires

Shmew picture Shmew  ·  15Commentaires

alfonsogarciacaro picture alfonsogarciacaro  ·  11Commentaires