Làm thế nào để kết hợp nhiều đối tượng phong cách nội tuyến?

Trong React, bạn có thể tạo một đối tượng rõ ràng và gán nó theo kiểu nội tuyến. I E. đề cập dưới đây.

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

Làm thế nào tôi có thể kết hợp nhiều đối tượng và gán chúng lại với nhau?

Nếu bạn đang sử dụng React Native, bạn có thể sử dụng ký hiệu mảng:

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

Kiểm tra bài viết chi tiết của tôi về điều này.

Bạn có thể sử dụng toán tử trải rộng:

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

Bạn có thể làm điều này với Object.assign().

Trong ví dụ của bạn, bạn sẽ làm:

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

Điều đó sẽ hợp nhất hai phong cách. Kiểu thứ hai sẽ thay thế kiểu thứ nhất nếu có các thuộc tính khớp.

Như Brandon đã lưu ý, bạn nên sử dụng Object.assign({}, divStyle, divStyle2)nếu bạn muốn sử dụng lại divStylemà không áp dụng fontSize cho nó.

Tôi thích sử dụng điều này để làm cho các thành phần với các thuộc tính mặc định. Ví dụ: đây là một thành phần không trạng thái với mặc định margin-right:

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

Vì vậy, chúng ta có thể kết xuất một cái gì đó như thế này:

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

Điều này sẽ cho chúng ta kết quả:

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

Không giống như React Native, chúng ta không thể vượt qua một loạt các kiểu trong React, như

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

Trong React, chúng ta cần tạo một đối tượng duy nhất của các kiểu trước khi chuyển nó sang thuộc tính style. Giống:

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

  let enhancedStyle = {
    fontSize: '38px'
  }

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

Chúng tôi đã sử dụng toán tử lây lan ES6 để kết hợp hai kiểu. Bạn cũng có thể sử dụng Object.assign () cho cùng một mục đích.

Điều này cũng hoạt động nếu bạn không cần lưu trữ kiểu của mình trong một var

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

Object.assign()là một giải pháp dễ dàng, nhưng cách sử dụng câu trả lời hàng đầu (hiện tại) của nó - trong khi chỉ tốt khi tạo các thành phần không trạng thái, sẽ gây ra vấn đề cho mục tiêu mong muốn của OP là hợp nhất hai stateđối tượng.

Với hai đối số, Object.assign()sẽ thực sự làm thay đổi đối tượng đầu tiên tại chỗ, ảnh hưởng đến việc khởi tạo trong tương lai.

Ví dụ:

Xem xét hai cấu hình kiểu có thể cho một hộp:

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

Vì vậy, chúng tôi muốn tất cả các hộp của mình có kiểu 'hộp' mặc định, nhưng muốn ghi đè lên một số bằng một màu khác:

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

Khi Object.assign()thực thi, đối tượng 'Styles.box' được thay đổi cho tốt.

Giải pháp là truyền một đối tượng trống vào Object.assign(). Khi làm như vậy, bạn đang nói phương thức tạo ra một đối tượng MỚI với các đối tượng bạn vượt qua nó. Thích như vậy:

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

Khái niệm về các đối tượng đột biến tại chỗ rất quan trọng đối với React và việc sử dụng đúng cách Object.assign()thực sự hữu ích cho việc sử dụng các thư viện như Redux.

Array notaion là cách tốt nhất để kết hợp các kiểu trong phản ứng gốc.

Điều này cho thấy cách kết hợp 2 đối tượng Style,

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

Điều này cho thấy cách kết hợp đối tượng Style và thuộc tính,

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

Điều này sẽ làm việc trên bất kỳ ứng dụng gốc phản ứng.

Bạn cũng có thể kết hợp các lớp với kiểu dáng nội tuyến như thế này:

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

Trên thực tế, có một cách chính thức để kết hợp và nó giống như dưới đây:

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

Nhưng, có một vấn đề nhỏ , nếu một trong số chúng được thông qua bởi thành phần cha mẹ và nó được tạo ra bởi một cách chính thức kết hợp, chúng ta có một vấn đề lớn:

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

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

Và dòng cuối cùng này gây ra lỗi UI, chắc chắn, React Native không thể xử lý một mảng sâu bên trong một mảng. Vì vậy, tôi tạo chức năng trợ giúp của mình:

import { StyleSheet } from 'react-native';

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

Bằng cách sử dụng styleJoinerbất cứ nơi nào tôi có thể kết hợp bất kỳ loại phong cách và kết hợp phong cách. thậm chí undefinedhoặc các loại vô dụng khác không gây ra phá vỡ kiểu dáng.

Tôi đã thấy rằng điều này làm việc tốt nhất cho tôi. Nó ghi đè như mong đợi.

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

Đối với những người tìm kiếm giải pháp này trong React, Nếu bạn muốn sử dụng toán tử lây lan bên trong kiểu, bạn nên sử dụng: babel-plugin-Transform-object-rest-lây lan.

Cài đặt nó bằng mô-đun npm và định cấu hình .babelrc của bạn như sau:

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

Sau đó, bạn có thể sử dụng như ...

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

Thông tin thêm: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-s lây /

Để thực hiện điều này hơn nữa, bạn có thể tạo một hàm trợ giúp giống như tên lớp :

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

Và sau đó sử dụng nó một cách có điều kiện trong các thành phần của bạn:

<div style={

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

}>Hello World!</div>

Vì vậy, về cơ bản tôi đang nhìn điều này theo cách sai. Từ những gì tôi thấy, đây không phải là một câu hỏi cụ thể về React, hơn nữa là một câu hỏi JavaScript về cách tôi kết hợp hai đối tượng JavaScript với nhau (mà không ghi đè các thuộc tính có tên tương tự).

Trong câu trả lời StackOverflow này, nó giải thích nó. Làm cách nào tôi có thể hợp nhất các thuộc tính của hai đối tượng JavaScript một cách linh hoạt?

Trong jQuery tôi có thể sử dụng phương thức mở rộng.

Để mở rộng những gì @PythonIsGreat đã nói, tôi tạo một hàm toàn cầu sẽ làm điều đó cho tôi:

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

Điều này mở rộng sâu sắc các đối tượng thành một đối tượng mới và cho phép một số lượng đối tượng khác nhau làm tham số. Điều này cho phép bạn làm một cái gì đó như thế này:

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

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

Tôi đã xây dựng một mô-đun cho việc này nếu bạn muốn thêm kiểu dựa trên một điều kiện như thế này:

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

https://www.npmjs.com/package/react-native-mult Môn-ststyle

Những cách tạo kiểu nội tuyến:

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