[reactjs] 여러 인라인 스타일 객체를 결합하는 방법은 무엇입니까?

Program / 글쓴이

React에서 객체를 명확하게 생성하고 인라인 스타일로 할당 할 수 있습니다. 즉. 아래에 언급.

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

두 가지 스타일이 병합됩니다. 일치하는 속성이있는 경우 두 번째 스타일이 첫 번째 스타일을 대체합니다.

Brandon이 언급했듯이 fontSize를 적용하지 않고 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에서는 style 속성에 전달하기 전에 단일 스타일 객체를 만들어야합니다. 처럼:

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

  let enhancedStyle = {
    fontSize: '38px'
  }

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

ES6 Spread 연산자 를 사용하여 두 가지 스타일을 결합했습니다. 같은 목적으로 Object.assign () 을 사용할 수도 있습니다 .

var에 스타일을 저장할 필요가없는 경우에도 작동합니다

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

답변

Object.assign()쉬운 솔루션이지만 (현재) 최고 답변 의 사용법은 상태 비 저장 구성 요소를 만드는 데는 좋지만 두 state개체 를 병합하는 OP의 원하는 목표에 문제를 일으킬 것입니다 .

두 개의 인수를 사용 Object.assign()하면 실제로 첫 번째 객체를 제자리에서 변경하여 향후 인스턴스화에 영향을줍니다.

전의:

상자에 대해 가능한 두 가지 스타일 구성을 고려하십시오. 

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

따라서 모든 상자에 기본 ‘box’스타일을 갖기를 원하지만 다른 색상으로 덮어 쓰려고합니다.

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

제자리에서 변경되는 객체에 대한 이러한 개념은 React에 중요하며, 올바른 사용은 Object.assign()Redux와 같은 라이브러리를 사용하는 데 실제로 도움이됩니다.

답변

Array Notaion은 반응 네이티브에서 스타일을 결합하는 가장 좋은 방법입니다.

2 개의 Style 객체를 결합하는 방법을 보여줍니다.

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