Jak łączyć wiele obiektów w stylu wbudowanym?

W React możesz wyraźnie utworzyć obiekt i przypisać go jako styl wbudowany. to znaczy. wspomniane poniżej.

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

var divStyle2 = {fontSize: '18px'};

React.render(<div style={divStyle}>Hello World!</div>, mountNode);

Jak mogę połączyć wiele obiektów i przypisać je razem?

Jeśli używasz React Native, możesz użyć notacji tablicowej:

<View style={[styles.base, styles.background]} />

Sprawdź mój szczegółowy post na blogu na ten temat.

Możesz użyć operatora rozprzestrzeniania:

 <button style={{...styles.panel.button,...styles.panel.backButton}}>Back</button

Możesz to zrobić za pomocą Object.assign().

W twoim przykładzie zrobiłbyś:

ReactDOM.render(
    <div style={Object.assign(divStyle, divStyle2)}>
        Hello World!
    </div>,
    mountNode
);

To połączy te dwa style. Drugi styl zastąpi pierwszy, jeśli istnieją pasujące właściwości.

Jak zauważył Brandon, powinieneś użyć, Object.assign({}, divStyle, divStyle2)jeśli chcesz ponownie użyć divStylebez zastosowanej czcionkiSize.

Lubię to wykorzystywać do tworzenia komponentów o domyślnych właściwościach. Na przykład, oto mały komponent bezstanowy z domyślnym margin-right:

const DivWithDefaults = ({ style, children, ...otherProps }) =>
    <div style={Object.assign({ marginRight: "1.5em" }, style)} {...otherProps}>
        {children}
    </div>;

Możemy więc renderować coś takiego:

<DivWithDefaults>
    Some text.
</DivWithDefaults>
<DivWithDefaults className="someClass" style={{ width: "50%" }}>
    Some more text.
</DivWithDefaults>
<DivWithDefaults id="someID" style={{ marginRight: "10px", height: "20px"}}>
    Even more text.
</DivWithDefaults>

Co da nam wynik:

<div style="margin-right:1.5em;">Some text.</div>
<div style="margin-right:1.5em;width50%;" class="someClass">Some more text.</div>
<div style="margin-right:10px;height:20px;" id="someID">Even more text.</div>

W przeciwieństwie do React Native, nie możemy przekazać tablicy stylów w React, np

<View style={[style1, style2]} />

W React musimy utworzyć pojedynczy obiekt stylów przed przekazaniem go do właściwości stylu. Lubić:

const Header = (props) => {
  let baseStyle = {
    color: 'red',
  }

  let enhancedStyle = {
    fontSize: '38px'
  }

  return(
    <h1 style={{...baseStyle, ...enhancedStyle}}>{props.title}</h1>
  );
}

Użyliśmy operatora ES6 Spread, aby połączyć dwa style. Możesz również użyć Object.assign () w tym samym celu.

Działa to również, jeśli nie musisz przechowywać swojego stylu w var

<Segment style={{...segmentStyle, ...{height:'100%'}}}>
    Your content
</Segment>

Object.assign()jest łatwym rozwiązaniem, ale użycie (obecnie) najwyższej odpowiedzi - choć jest w porządku do tworzenia elementów bezstanowych, spowoduje problemy w pożądanym celu PO polegającym na połączeniu dwóch stateobiektów.

Za pomocą dwóch argumentów Object.assign()faktycznie mutuje pierwszy obiekt w miejscu, wpływając na przyszłe wystąpienia.

Dawny:

Rozważ dwie możliwe konfiguracje stylu dla pudełka:

var styles =  {
  box: {backgroundColor: 'yellow', height: '100px', width: '200px'},
  boxA: {backgroundColor: 'blue'},
};

Dlatego chcemy, aby wszystkie nasze pola miały domyślne style „pól”, ale chcemy nadpisać niektóre innym kolorem:

// this will be yellow
<div style={styles.box}></div>

// this will be blue
<div style={Object.assign(styles.box, styles.boxA)}></div>

// this SHOULD be yellow, but it's blue.
<div style={styles.box}></div>

Po Object.assign()uruchomieniu obiekt „styles.box” zostaje na dobre zmieniony.

Rozwiązaniem jest przekazanie pustego obiektu Object.assign(). Robiąc to, mówisz metodzie, aby wytworzyć NOWY obiekt z obiektami, które przekazujesz. Tak jak:

// this will be yellow
<div style={styles.box}></div>

// this will be blue
<div style={Object.assign({}, styles.box, styles.boxA)}></div>

// a beautiful yellow
<div style={styles.box}></div>

To pojęcie obiektów mutujących w miejscu jest kluczowe dla React, a prawidłowe użycie Object.assign()jest naprawdę pomocne w korzystaniu z bibliotek takich jak Redux.

Notatka tablicowa to najlepszy sposób łączenia stylów w reakcji native.

To pokazuje, jak połączyć 2 obiekty Style,

<Text style={[styles.base, styles.background]} >Test </Text>

pokazuje, jak połączyć obiekt i właściwość Style,

<Text style={[styles.base, {color: 'red'}]} >Test </Text>

Będzie to działać na każdej aplikacji natywnej reagującej.

Możesz także łączyć klasy ze stylem wbudowanym w ten sposób:

<View style={[className, {paddingTop: 25}]}>
  <Text>Some Text</Text>
</View>

W rzeczywistości istnieje formalny sposób łączenia i wygląda to tak:

<View style={[style01, style02]} />

Ale jest mały problem , jeśli jeden z nich jest przekazywany przez komponent nadrzędny i został utworzony przez połączenie formalne, mamy duży problem:

// The passing style02 from props: [parentStyle01, parentStyle02]

// Now:
<View style={[style01, [parentStyle01, parentStyle02]]} />

Ta ostatnia linia powoduje błąd interfejsu użytkownika, niestety React Native nie może poradzić sobie z głęboką tablicą wewnątrz tablicy. Więc tworzę moją funkcję pomocnika:

import { StyleSheet } from 'react-native';

const styleJoiner = (...arg) => StyleSheet.flatten(arg);

Używając mojego w styleJoinerdowolnym miejscu, możesz łączyć dowolny styl i łączyć style. nawet undefinedinne bezużyteczne typy nie powodują zepsucia stylizacji.

Przekonałem się, że to działa dla mnie najlepiej. Zastępuje zgodnie z oczekiwaniami.

return <View style={{...styles.local, ...styles.fromProps}} />

Dla tych, którzy szukają tego rozwiązania w React, jeśli chcesz używać operatora rozkładania wewnątrz stylu, powinieneś użyć: babel-plugin-transform-object-rest-spread.

Zainstaluj go za pomocą modułu npm i skonfiguruj .babelrc jako taki:

{
  "presets": ["env", "react"],
  "plugins": ["transform-object-rest-spread"]
}

Następnie możesz użyć jak ...

const sizing = { width: 200, height: 200 }
 <div
   className="dragon-avatar-image-background"
   style={{ backgroundColor: blue, ...sizing }}
  />

Więcej informacji: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/

Aby pójść dalej, możesz utworzyć funkcję pomocniczą podobną do nazw klas:

const styleRules = (...rules) => {
  return rules.filter(Boolean).reduce((result, rule) => {
    return { ...result, ...rule };
  }, {});
};

A następnie użyj go warunkowo w swoich komponentach:

<div style={

  styleRules(
    divStyle,
    (window.innerWidth >= 768) && divStyleMd,
    (window.innerWidth < 768) && divStyleSm
  )

}>Hello World!</div>

Zasadniczo patrzę na to w niewłaściwy sposób. Z tego, co widzę, nie jest to pytanie specyficzne dla React, bardziej pytanie JavaScript, w jaki sposób połączyć razem dwa obiekty JavaScript (bez blokowania właściwości o podobnych nazwach).

W tej odpowiedzi StackOverflow wyjaśnia to. Jak mogę dynamicznie łączyć właściwości dwóch obiektów JavaScript?

W jQuery mogę użyć metody ext.

Aby rozwinąć to, co powiedział @PythonIsGreat, tworzę globalną funkcję, która zrobi to za mnie:

var css = function(){
    var args = $.merge([true, {}], Array.prototype.splice.call(arguments, 0));
    return $.extend.apply(null, args);
}

To głęboko rozszerza obiekty na nowy obiekt i pozwala na zmienną liczbę obiektów jako parametrów. Pozwala to zrobić coś takiego:

return(
<div style={css(styles.base, styles.first, styles.second,...)} ></div>
);

var styles = {
  base:{
    //whatever
  },
  first:{
    //whatever
  },
  second:{
    //whatever
  }
}

Zbudowałem do tego moduł, jeśli chcesz dodać style w oparciu o taki warunek:

multipleStyles(styles.icon, { [styles.iconRed]: true })

https://www.npmjs.com/package/react-native-multiple-styles

Sposoby stylizacji w linii:

<View style={[styles.red, {fontSize: 25}]}>
  <Text>Hello World</Text>
</View>

<View style={[styles.red, styles.blue]}>
  <Text>Hello World</Text>
</View>

  <View style={{fontSize:10,marginTop:10}}>
  <Text>Hello World</Text>
</View>