कैसे कई इनलाइन शैली वस्तुओं गठबंधन करने के लिए?

Question

प्रतिक्रिया में आप स्पष्ट रूप से एक वस्तु बना सकते हैं और इसे एक इनलाइन शैली के रूप में निर्दिष्ट कर सकते हैं। अर्थात। नीचे लिखा हैं।

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

मैं कई वस्तुओं को कैसे जोड़ सकता हूं और उन्हें एक साथ असाइन कर सकता हूं?

Comments

दो वस्तुएं क्या दिखती हैं?

— रयान

Answer 1

यदि आप रिएक्टिव नेटिव का उपयोग कर रहे हैं, तो आप ऐरे नोटेशन का उपयोग कर सकते हैं:

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

इस बारे में मेरी विस्तृत ब्लॉग पोस्ट देखें ।

Comments

अफसोस की बात है कि आप इसे नियमित रूप से नहीं कर सकते।

— योतेंगो यूएनएलसीडी

यदि आप रिएक्ट-नेटिव

— कैल्केजर

आप शैली के नाम / मान जोड़कर मौजूदा इनलाइन शैली को थोड़ा संशोधित कर सकते हैं। उदाहरण के लिए,<View style={this.state.error == false ? styles.base : [styles.base, {backgroundColor: 'red'}]} />

— गूलर कैनबेक

दो स्थिर शैलियों के लिए, StyleSheet.compose()रेंडर फ़ंक्शन के बाहर करना अधिक कुशल हो सकता है। यह एक नया स्टैटिक स्टाइलशीट तैयार करेगा जो केवल एक बार ब्रिज पर भेजा जाएगा। (यह सलाह उन शैलियों पर लागू नहीं होती है जो रनटाइम में बदलती हैं, या जो स्टाइलशीट के बजाय इनलाइन हैं।)

— joeytwield

Answer 2

आप प्रसार ऑपरेटर का उपयोग कर सकते हैं:

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

Comments

मुझे "सिंटैक्स त्रुटि: अनपेक्षित टोकन" मिलता है, जो पहले फैल ऑपरेटर में पहले बिंदु पर इंगित करता है।

— इजाकाता

@Izkata क्या आप ऐसा कर रहे हैं या प्रतिक्रिया में मूलनिवासी हैं, क्या आप अपना स्निपेट पोस्ट कर सकते हैं

— Nath

प्रतिक्रिया, यह कुछ इस तरह था<div style={{ ...LEGEND_STYLE.box_base, ...{ 'background': '#123456' } }} />

— इज़काता जूल

मैंने इसे वैसे भी एक हेल्पर फंक्शन का उपयोग करने के लिए बदल दिया <div style={LEGEND_STYLE.box_gen('#123456')}, इसलिए यह मेरे लिए बहुत बड़ी बात नहीं है

— इज़्काटा

यह तब भी काम करता है जब ऑब्जेक्ट में केवल एक कुंजी-मूल्य जोड़ी होती है, भले ही प्रसार ऑपरेटर केवल पुनरावृत्तियों के लिए मान्य हों! क्या आप व्यख्या कर सकते हैं? developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— टायलर

Answer 3

आप इसके साथ कर सकते हैं Object.assign()।

अपने उदाहरण में, आप करेंगे:

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

यह दो शैलियों का विलय करेगा। यदि मिलान गुण हैं तो दूसरी शैली पहले की जगह लेगी।

जैसा कि ब्रैंडन ने उल्लेख किया है, आपको इसका उपयोग करना चाहिए, Object.assign({}, divStyle, divStyle2)यदि आप इसके divStyleबिना उपयोग किए गए फ़ॉन्ट का उपयोग करना चाहते हैं ।

मुझे डिफ़ॉल्ट गुणों वाले घटक बनाने के लिए इसका उपयोग करना पसंद है। उदाहरण के लिए, यहां डिफ़ॉल्ट के साथ थोड़ा स्टेटलेस घटक है margin-right:

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

तो हम कुछ इस तरह प्रस्तुत कर सकते हैं:

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

जो हमें परिणाम देगा:

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

Comments

यह समाधान संभावित रूप Object.assign()से एक तरह से दुरुपयोग है जो कुछ अवांछनीय परिणामों को जन्म देगा। देखें इस सवाल का जवाब यहाँ एक और अधिक विश्वसनीय समाधान।

— ब्रैंडन

आपका जवाब Object.assign () का दुरुपयोग करने का एक तरीका दर्शाता है। यह कुछ लोगों के लिए उपयोगी जानकारी हो सकती है, लेकिन यह मेरे उदाहरण पर लागू नहीं होती है। यह उदाहरण किसी ऑब्जेक्ट में डिफ़ॉल्ट को संग्रहीत नहीं कर रहा है, इसे उत्परिवर्तित कर रहा है, फिर कहीं और उत्परिवर्तित ऑब्जेक्ट का पुन: उपयोग कर रहा है।

— qel

सहमत नहीं हैं। आप Object.assign()अपने उत्तर में उपयोग के दो अलग-अलग तरीकों को संबोधित करते हैं। पहला, पहले कुछ वाक्यों में, मेरे द्वारा पहचाने गए दुरुपयोग का एक उदाहरण है (यानी, यदि ओपी ने आपको अपने पहले codeब्लॉक में सलाह दी थी , तो वह / वह म्यूट कर देगा {divStyle})। दूसरा तरीका - यानी, इसे एक फंक्शन में लपेटना जैसा कि आपके पास है, काम करेगा, लेकिन इसका उत्तर यह स्पष्ट नहीं करता है कि आप 'आम' के लिए काम कर रहे हैं, यह Object.assign()अपरिवर्तनीयता (हालांकि व्यक्तिगत रूप से मुझे लगता है कि यह थोड़ा है प्रत्येक डिफ़ॉल्ट घटक के लिए एक कस्टम स्टेटलेस फ़ंक्शन लिखने के लिए बोझिल)।

— ब्रैंडन

ओह ठीक। यह सच है। अगर वह फोंट लगाने के बिना डिवसेल का पुन: उपयोग करना चाहता था, तो उसे पहले खाली वस्तु की आवश्यकता होगी। मैं जवाब अपडेट कर दूंगा।

— qel

Object.assign () एक सुगमता प्राप्त करने का अब तक का सबसे सुविधाजनक तरीका है :)

— aldobsom

Answer 4

रिएक्ट नेटिव के विपरीत, हम रिएक्ट में शैलियों की सरणी पास नहीं कर सकते, जैसे

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

प्रतिक्रिया में, हमें स्टाइल प्रॉपर्टी को पास करने से पहले शैलियों की एकल वस्तु बनाने की आवश्यकता है। पसंद:

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

  let enhancedStyle = {
    fontSize: '38px'
  }

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

हमने दो शैलियों को संयोजित करने के लिए ES6 स्प्रेड ऑपरेटर का उपयोग किया है । आप समान उद्देश्य के लिए Object.assign () का भी उपयोग कर सकते हैं ।

यह भी काम करता है अगर आपको अपनी शैली को var में संग्रहीत करने की आवश्यकता नहीं है

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

Comments

हम शैली के लिए सरणी पास नहीं कर सकते?

— हाइजेनबर्ग

बस अपने अंतिम स्निपेट में जोड़ने के लिए, {{... सेगमेंट स्टाइल, ऊंचाई: '100%'}} भी काम करेगा।

— ल्यूक ब्रैंडन फैरेल

Answer 5

Object.assign()एक आसान समाधान है, लेकिन (वर्तमान में) शीर्ष उत्तर इसका उपयोग - जबकि केवल स्टेटलेस घटक बनाने के लिए ठीक है, ओपी के दो stateवस्तुओं के विलय के वांछित उद्देश्य के लिए समस्याएं पैदा करेगा ।

दो तर्कों के साथ, Object.assign()वास्तव में भविष्य के तात्कालिकता को प्रभावित करते हुए, पहली वस्तु को जगह में बदल देगा।

उदाहरण के लिए:

एक बॉक्स के लिए दो संभावित स्टाइल कॉन्फिगर पर विचार करें:

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

इसलिए हम चाहते हैं कि हमारे सभी बॉक्स डिफॉल्ट 'बॉक्स' शैली के हों, लेकिन कुछ अलग रंग के साथ लिखना चाहते हैं:

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

एक बार Object.assign()निष्पादित होने के बाद , 'style.box' ऑब्जेक्ट को अच्छे के लिए बदल दिया जाता है।

समाधान के लिए एक खाली वस्तु पारित करना है Object.assign()। ऐसा करने में, आप इसे पास करने वाली वस्तुओं के साथ एक नई वस्तु बनाने की विधि बता रहे हैं। इस तरह:

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

रिएक्ट के लिए इन-प्लेस म्यूटिंग की यह धारणा महत्वपूर्ण है, और Object.assign()Redux जैसे पुस्तकालयों का उपयोग करने के लिए उचित उपयोग वास्तव में मददगार है।

Comments

Object.assign का दुरुपयोग कैसे किया जाए, इसका उदाहरण इस बात का वैध प्रतिनिधित्व नहीं है कि Object.assign का उपयोग (वर्तमान में) शीर्ष उत्तर में कैसे किया जा रहा है।

— qel

धन्यवाद, यह दिखाने के लिए संपादन किया गया है कि कौन सा पहलू (वर्तमान में) एक दुरुपयोग है

— ब्रेंडन

कोड का अच्छा टुकड़ा वहाँ। Object.assign ({}, this.state.showStartOverBtn; {}: this.hidden, this.btnStyle)} सशर्त भी एक आकर्षण की तरह काम करते हैं

— Stepveinatorx

Answer 6

एरेना नोटियन प्रतिक्रिया शैलियों में शैलियों के संयोजन का सबसे अच्छा तरीका है।

यह दिखाता है कि 2 स्टाइल ऑब्जेक्ट को कैसे संयोजित किया जाए,

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

यह दिखाता है कि स्टाइल ऑब्जेक्ट और प्रॉपर्टी को कैसे संयोजित किया जाए,

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

यह किसी भी प्रतिक्रिया देशी अनुप्रयोग पर काम करेगा।

Comments

प्रश्न यह है कि React, नहींReact Native

— दिमित्र त्सोनव

आप रिएक्ट के लिए भी इसका इस्तेमाल कर सकते हैं

— ससिंधु लाक्षिता

रिएक्ट शुरू से सरणी का समर्थन नहीं करता है और अब यह काम नहीं करता है।

— witoong623

प्रतिक्रिया इस तरह से गठबंधन शैली का समर्थन नहीं करते।

— क्रोधित कीवी

Answer 7

आप इनलाइन स्टाइल के साथ कक्षाएं भी जोड़ सकते हैं:

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

Answer 8

वास्तव में, संयोजन करने का एक औपचारिक तरीका है और यह नीचे की तरह है:

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

लेकिन, एक छोटा सा मुद्दा है , अगर उनमें से एक मूल घटक द्वारा पारित किया गया है और इसे एक संयुक्त औपचारिक तरीके से बनाया गया है तो हमारे पास एक बड़ा विकल्प है:

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

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

और इस अंतिम पंक्ति में यूआई बग होने का कारण बनता है, ठीक है, रिएक्ट नेटिव एक सरणी के अंदर एक गहरी सरणी के साथ सौदा नहीं कर सकता है। इसलिए मैं अपना सहायक कार्य बनाता हूं:

import { StyleSheet } from 'react-native';

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

मेरा styleJoinerकहीं भी उपयोग करके आप किसी भी प्रकार की शैली को जोड़ सकते हैं और शैलियों को जोड़ सकते हैं। यहां तक ​​कि undefinedया अन्य बेकार प्रकार स्टाइल को तोड़ने का कारण नहीं है।

Answer 9

मैंने पाया है कि यह मेरे लिए सबसे अच्छा काम करता है। यह उम्मीद के मुताबिक आगे निकल जाता है।

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

Answer 10

प्रतिक्रिया में इस समाधान को देखने वाले लोगों के लिए, यदि आप शैली के अंदर प्रसार ऑपरेटर का उपयोग करना चाहते हैं, तो आपको उपयोग करना चाहिए: बैबल-प्लगइन-ट्रांसफ़ॉर्म-ऑब्जेक्ट-बाकी-स्प्रेड।

इसे npm मॉड्यूल द्वारा स्थापित करें और अपने .babelrc को इस तरह कॉन्फ़िगर करें:

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

तो आप की तरह उपयोग कर सकते हैं ...

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

अधिक जानकारी: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/

Answer 11

इसे और भी आगे ले जाने के लिए, आप एक क्लासनेम -जैसे सहायक समारोह बना सकते हैं :

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

और फिर इसे अपने घटकों में सशर्त रूप से उपयोग करें:

<div style={

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

}>Hello World!</div>

Answer 12

इसलिए मूल रूप से मैं इसे गलत तरीके से देख रहा हूं। जो मैं देख रहा हूं, यह एक प्रतिक्रियाशील विशिष्ट प्रश्न नहीं है, जावास्क्रिप्ट के अधिक सवाल मैं दो जावास्क्रिप्ट वस्तुओं को एक साथ कैसे संयोजित करता हूं (बिना नाम के गुणों को समान किए हुए)।

इस StackOverflow जवाब में यह बताते हैं। मैं दो जावास्क्रिप्ट वस्तुओं के गुणों को गतिशील रूप से कैसे मिला सकता हूं?

JQuery में मैं विस्तार विधि का उपयोग कर सकता हूं।

Comments

सीएसएस शैलियों वाले ऑब्जेक्ट के साथ काम करते समय बस वस्तुओं का विलय पर्याप्त नहीं है। शॉर्टहैंड गुण, विभिन्न पत्र आवरण आदि हैं जिन्हें मर्जिंग फ़ंक्शन द्वारा सही क्रम में संभाला जाना चाहिए। मैं देख रहा हूँ और अभी तक ऐसा कोई पुस्तकालय नहीं मिला है जो इस तरह का कार्य प्रदान करता हो।

— sompylasar

यहाँ एक पुस्तकालय है जो आशुलिपि संपत्ति का विस्तार करता है: github.com/kapetan/css-shorthand-expand , लेकिन यह पूर्ण समाधान नहीं है।

— सोमपिलसार

Answer 13

@PythonIsGreat ने जो कहा, उस पर विस्तार करने के लिए, मैं एक वैश्विक समारोह बनाता हूं जो यह मेरे लिए करेगा:

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

यह गहराई से वस्तुओं को एक नई वस्तु में विस्तारित करता है और मापदंडों के रूप में वस्तुओं की एक चर संख्या के लिए अनुमति देता है। यह आपको ऐसा कुछ करने की अनुमति देता है:

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

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

Comments

सीएसएस शैलियों वाले ऑब्जेक्ट के साथ काम करते समय एक सादा वस्तु विलय कार्य पर्याप्त नहीं है। ऊपर दिए गए उत्तर के लिए मेरी टिप्पणी देखें।

— sompylasar

Answer 14

मैंने इसके लिए एक मॉड्यूल बनाया है यदि आप इस तरह की स्थिति के आधार पर शैलियों को जोड़ना चाहते हैं:

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

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

Answer 15

इनलाइन स्टाइल के तरीके:

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

Comments

रिएक्ट शुरू से सरणी का समर्थन नहीं करता है और अब यह काम नहीं करता है।

— witoong623