Bagaimana cara menggabungkan beberapa objek gaya inline?

Di Bereaksi, Anda dapat dengan jelas membuat objek dan menetapkannya sebagai gaya sebaris. yaitu. disebutkan di bawah.

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);

Bagaimana saya bisa menggabungkan beberapa objek dan menetapkannya bersama?

Jika Anda menggunakan React Native, Anda dapat menggunakan notasi array:

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

Lihat posting blog saya yang terperinci tentang ini.

Anda dapat menggunakan operator spread:

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

Anda dapat melakukannya dengan Object.assign().

Dalam contoh Anda, Anda akan melakukan:

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

Itu akan menggabungkan dua gaya. Gaya kedua akan menggantikan yang pertama jika ada properti yang cocok.

Seperti dicatat Brandon, Anda harus menggunakan Object.assign({}, divStyle, divStyle2)jika Anda ingin menggunakan kembali divStyletanpa fontSize diterapkan untuk itu.

Saya suka menggunakan ini untuk membuat komponen dengan properti default. Sebagai contoh, inilah komponen stateless kecil dengan default margin-right:

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

Jadi kita dapat membuat sesuatu seperti ini:

<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>

Yang akan memberi kita hasilnya:

<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>

Tidak seperti Bereaksi Asli, kami tidak dapat meneruskan larik gaya di Bereaksi

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

Dalam Bereaksi, kita perlu membuat objek tunggal gaya sebelum meneruskannya ke properti gaya. Suka:

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

  let enhancedStyle = {
    fontSize: '38px'
  }

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

Kami telah menggunakan operator ES6 Spread untuk menggabungkan dua gaya. Anda juga bisa menggunakan Object.assign () juga untuk tujuan yang sama.

Ini juga berfungsi jika Anda tidak perlu menyimpan gaya Anda dalam var

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

Object.assign()adalah solusi yang mudah, tetapi (saat ini) jawaban atas penggunaannya - walaupun baik untuk membuat komponen stateless, akan menyebabkan masalah bagi tujuan OP yang diinginkan untuk menggabungkan duastate objek.

Dengan dua argumen, Object.assign()sebenarnya akan bermutasi objek pertama di tempat, mempengaruhi instantiations masa depan.

Ex:

Pertimbangkan dua kemungkinan konfigurasi gaya untuk sebuah kotak:

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

Jadi kami ingin semua kotak kami memiliki gaya 'kotak' default, tetapi ingin menimpa beberapa dengan warna yang berbeda:

// 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>

Setelah Object.assign()dieksekusi, objek 'styles.box' diubah untuk selamanya.

Solusinya adalah dengan mengirimkan objek kosong ke Object.assign(). Dengan demikian, Anda memberi tahu metode untuk menghasilkan objek BARU dengan objek yang Anda lewati. Seperti itu:

// 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>

Gagasan objek bermutasi di tempat sangat penting untuk Bereaksi, dan penggunaan yang tepat Object.assign()sangat membantu untuk menggunakan perpustakaan seperti Redux.

Array notaion adalah cara terbaik untuk menggabungkan gaya dalam reaksi asli.

Ini menunjukkan cara menggabungkan 2 objek Style,

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

ini menunjukkan cara menggabungkan objek Style dan properti,

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

Ini akan bekerja pada aplikasi asli apa pun yang bereaksi.

Anda juga dapat menggabungkan kelas dengan gaya inline seperti ini:

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

Sebenarnya, ada cara formal untuk menggabungkan dan seperti di bawah ini:

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

Tapi, ada masalah kecil , jika salah satunya dilewatkan oleh komponen induk dan itu dibuat dengan cara formal gabungan kita punya masalah besar:

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

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

Dan baris terakhir ini menyebabkan bug UI, bermuka masam, React Native tidak dapat menangani array yang dalam di dalam array. Jadi saya membuat fungsi pembantu saya:

import { StyleSheet } from 'react-native';

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

Dengan menggunakan saya di styleJoinermana saja Anda dapat menggabungkan semua jenis gaya dan menggabungkan gaya. bahkan undefinedatau tipe tidak berguna lainnya tidak menyebabkan penataan yang rusak.

Saya telah menemukan bahwa ini bekerja paling baik untuk saya. Itu menimpa seperti yang diharapkan.

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

Untuk mereka yang mencari solusi ini di Bereaksi, Jika Anda ingin menggunakan operator dalam gaya, Anda harus menggunakan: babel-plugin-transform-objek-rest-spread.

Instal dengan modul npm dan konfigurasikan .brcrc Anda seperti itu:

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

Maka Anda dapat menggunakan seperti ...

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

Info lebih lanjut: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/

Untuk mengambil yang ini lebih jauh, Anda bisa membuat fungsi pembantu seperti classnames :

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

Dan kemudian gunakan kondisional dalam komponen Anda:

<div style={

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

}>Hello World!</div>

Jadi pada dasarnya saya melihat ini dengan cara yang salah. Dari apa yang saya lihat, ini bukan pertanyaan spesifik Bereaksi, lebih merupakan pertanyaan JavaScript tentang bagaimana cara menggabungkan dua objek JavaScript bersama-sama (tanpa clobbering properti dengan nama yang sama).

Dalam jawaban StackOverflow ini menjelaskannya. Bagaimana saya bisa menggabungkan properti dua objek JavaScript secara dinamis?

Di jQuery saya bisa menggunakan metode extended.

Untuk Perluas apa yang dikatakan @PythonIsGreat, saya membuat fungsi global yang akan melakukannya untuk saya:

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

Ini sangat memperluas objek menjadi objek baru dan memungkinkan sejumlah variabel objek sebagai parameter. Ini memungkinkan Anda melakukan sesuatu seperti ini:

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

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

Saya telah membuat modul untuk ini jika Anda ingin menambahkan gaya berdasarkan kondisi seperti ini:

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

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

Cara penataan inline:

<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>