Ποια είναι η ιδιωματική τρόπος για να δημιουργήσετε στυλ για ένα στοιχείο Λόγος-React που εξαρτώνται από στηρίγματα;

ψήφοι
1

Για να μάθετε και , δουλεύω σε ένα απλό «Τα πράγματα 2 Κάντε» εφαρμογή (δείτε τον πηγαίο κώδικα για GitHub ).

Έχω ένα TodoItem στοιχείο που θα πρέπει να αποδίδεται με στυλ απεργία-through όταν έχει ολοκληρωθεί το αντικείμενο.

Θα προσπαθήσουμε να λύσουμε αυτό με τη δημιουργία ενός ρεκόρ με διάφορες μορφές, παρόμοια με τις κατηγορίες CSS, το στυλ μία ρίζα και μία για τα ολοκληρωμένα στοιχεία.

type style = {
  root: ReactDOMRe.style,
  completed: ReactDOMRe.style
};

let styles = {
  root: ReactDOMRe.Style.make(), /* add root styles here */
  completed: ReactDOMRe.Style.make(~opacity=0.666, ~textDecoration=line-through, ())
};

Αν το στήριγμα ολοκληρωθεί είναι αλήθεια, έχω συνδυάσει το στυλ ρίζα με την ολοκληρωμένη στυλ, αλλιώς απλά χρησιμοποιήστε τη ρίζα, όπως αυτό:

let style = styles.root;
let style = item.completed ? ReactDOMRe.Style.combine(style, styles.completed) : style;

Αυτό λειτουργεί, αλλά φαίνεται clunky, έτσι αναρωτιέμαι: Είναι μια πιο κομψή λύση υπάρχει, για παράδειγμα, χρησιμοποιώντας μια παραλλαγή και μια δήλωση διακόπτη;

Ποια είναι η ιδιωματική τρόπος για να δημιουργήσετε στυλ για ένα στοιχείο Λόγος-React που εξαρτώνται από στηρίγματα;

Εδώ είναι ο πλήρης κώδικας του συστατικού μου:

type item = {
  id: int,
  title: string,
  completed: bool
};

type style = {
  root: ReactDOMRe.style,
  completed: ReactDOMRe.style
};

let str = ReasonReact.stringToElement;

let component = ReasonReact.statelessComponent(TodoItem);

let styles = {
  root: ReactDOMRe.Style.make(), /* add root styles here */
  completed: ReactDOMRe.Style.make(~opacity=0.666, ~textDecoration=line-through, ())
};

let make = (~item: item, ~onToggle, _) => {
  ...component,
  render: (_) => {
    let style = styles.root;
    let style = item.completed ? ReactDOMRe.Style.combine(style, styles.completed) : style;
    <div style>
      <input
        _type=checkbox
        onChange=((_) => onToggle())
        checked=(Js.Boolean.to_js_boolean(item.completed))
      />
      <label> (str(item.title)) </label>
    </div>
  }
};
Δημοσιεύθηκε 29/12/2017 στις 15:32
πηγή χρήστη
Σε άλλες γλώσσες...                            


2 απαντήσεις

ψήφοι
0

Προς το παρόν, ο τρόπος που είμαι styling στοιχείο μου είναι εντάξει. Δεν υπάρχει πραγματικά μια ιδιωματική τρόπο για styling Αντιδρούν συστατικά σε Λόγος ακόμα .

Η τεκμηρίωση λόγος έχει να πει :

Από CSS-in-JS είναι όλη η οργή αυτή τη στιγμή, θα σας προτείνουμε την επίσημη επιλογή μας σύντομα. Εν τω μεταξύ, για ενσωματωμένα στυλ, υπάρχει το API ReactDOMRe.Style.make

Απαντήθηκε 29/12/2017 στις 17:04
πηγή χρήστη

ψήφοι
3

Δεν νομίζω ότι υπάρχει κάτι που μπορεί να ονομαστεί ιδιωματικές ακόμα. Η περιοχή αλλάζει γρήγορα, και ακόμα έχω κάποιες ιδέες μου για το πώς να το βελτιώσουμε, αλλά αυτό είναι περισσότερο ή λιγότερο το πώς μπορώ να το κάνω τώρα με τη χρήση BS-CSS :

module Styles = {
  open Css;

  let root = completed => style([
    color(white),
    opacity(completed ? 0.666 : 1.),
    textDecoration(completed ? LineThrough : None)
  ]);
}

...

  render: _self =>
    <div className=Styles.root(item.completed)>
      ...
    </div>
Απαντήθηκε 29/12/2017 στις 19:43
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more