วิธีการรวมวัตถุสไตล์แบบอินไลน์หลายรายการ?

ในการตอบสนองคุณสามารถสร้างวัตถุอย่างชัดเจนและกำหนดให้เป็นสไตล์แบบอินไลน์ กล่าวคือ ระบุไว้ด้านล่าง

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

ฉันจะรวมหลายวัตถุและกำหนดให้เข้าด้วยกันได้อย่างไร

หากคุณใช้ React Native คุณสามารถใช้สัญลักษณ์อาร์เรย์:

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

ลองดูโพสต์บล็อกของฉันโดยละเอียดเกี่ยวกับสิ่งนี้

คุณสามารถใช้โอเปอเรเตอร์การแพร่กระจาย:

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

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>

ต่างจาก React Native เราไม่สามารถผ่านสไตล์ใน React ได้เช่น

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

ใน React เราจำเป็นต้องสร้างอ็อบเจกต์ของสไตล์เดียวก่อนที่จะส่งไปยังคุณสมบัติของสไตล์ ชอบ:

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

  let enhancedStyle = {
    fontSize: '38px'
  }

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

เราใช้ตัวดำเนินการ ES6 เพื่อรวมสองลักษณะ คุณยังสามารถใช้Object.assign ()เพื่อจุดประสงค์เดียวกันได้

สิ่งนี้ยังใช้งานได้หากคุณไม่ต้องการจัดเก็บสไตล์ของคุณในรูปแบบ

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

Object.assign()เป็นคำตอบที่ง่าย แต่การใช้คำตอบสูงสุด (ปัจจุบัน) ของมัน - ในขณะที่ดีสำหรับการสร้างส่วนประกอบไร้สัญชาติจะทำให้เกิดปัญหาสำหรับวัตถุประสงค์ที่ต้องการของ OP ในการรวมสองstateวัตถุ

ด้วยสองข้อโต้แย้งObject.assign()จะกลายพันธุ์วัตถุแรกในสถานที่ที่มีผลต่อการสร้างอินสแตนซ์ในอนาคต

Ex:

พิจารณาการกำหนดค่าสไตล์ที่เป็นไปได้สองแบบสำหรับกล่อง:

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()ดำเนินการแล้ววัตถุ 'styles.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

Array notaion เป็นวิธีที่ดีที่สุดในการรวมสไตล์เข้ากับ Native Native

สิ่งนี้แสดงวิธีการรวมวัตถุ 2 สไตล์เข้าด้วยกัน

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

สิ่งนี้แสดงวิธีรวมวัตถุสไตล์และคุณสมบัติเข้าด้วยกัน

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

วิธีนี้จะใช้ได้กับแอปพลิเคชันที่แปลมาเอง

คุณสามารถรวมคลาสเข้ากับสไตล์อินไลน์ได้ดังนี้:

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

จริงๆแล้วมีวิธีการรวมอย่างเป็นทางการและเป็นดังนี้:

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

แต่มีปัญหาเล็ก ๆหากหนึ่งในนั้นถูกส่งผ่านโดยองค์ประกอบหลักและมันถูกสร้างขึ้นโดยวิธีการรวมกันอย่างเป็นทางการเรามีปัญหาใหญ่:

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

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

และบรรทัดสุดท้ายนี้ทำให้เกิดข้อผิดพลาด UI อย่างแท้จริง React Native ไม่สามารถจัดการกับอาร์เรย์ที่อยู่ลึกภายในอาร์เรย์ได้ ดังนั้นฉันจึงสร้างฟังก์ชันผู้ช่วยของฉัน:

import { StyleSheet } from 'react-native';

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

ด้วยการใช้ของฉันstyleJoinerทุกที่คุณสามารถรวมสไตล์ใดก็ได้และรวมสไตล์เข้าด้วยกัน แม้กระทั่งundefinedหรือประเภทไร้ประโยชน์อื่น ๆ ไม่ก่อให้เกิดการแบ่งสไตล์

ฉันพบว่ามันใช้งานได้ดีที่สุดสำหรับฉัน มันแทนที่ตามที่คาดไว้

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

สำหรับผู้ที่มองหาวิธีแก้ปัญหานี้ใน React หากคุณต้องการใช้ตัวดำเนินการสเปรดภายในสไตล์คุณควรใช้: babel-plugin-transform-object-rest-spread

ติดตั้งโดยโมดูล npm และกำหนดค่า .abelrc ของคุณเช่น:

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

หากต้องการใช้สิ่งนี้ยิ่งขึ้นคุณสามารถสร้างฟังก์ชันตัวช่วยคล้ายชื่อคลาสได้ :

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>

โดยพื้นฐานแล้วฉันกำลังดูสิ่งนี้ในทางที่ผิด จากสิ่งที่ฉันเห็นนี่ไม่ใช่คำถามเฉพาะ React คำถาม JavaScript มากขึ้นฉันจะรวมสองวัตถุ JavaScript เข้าด้วยกันได้อย่างไร (โดยไม่ต้องปิดกั้นคุณสมบัติที่มีชื่อคล้ายกัน)

ใน StackOverflow คำตอบนี้จะอธิบายมัน ฉันจะรวมคุณสมบัติของวัตถุ JavaScript สองรายการแบบไดนามิกได้อย่างไร

ใน jQuery ฉันสามารถใช้วิธีการขยายได้

หากต้องการขยายสิ่งที่ @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
  }
}

ฉันได้สร้างโมดูลสำหรับสิ่งนี้หากคุณต้องการเพิ่มสไตล์ตามเงื่อนไขดังนี้:

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

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

วิธีจัดแต่งทรงผมแบบอินไลน์:

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