React에서 조건부 스타일을 처리하는 올바른 방법

React에서 조건부 스타일을 처리하는 올바른 방법

지금 리액트 하고 있는데 컨디셔닝 하는 '올바른' 방법이 있을까요?튜토리얼에서는 다음과 같이 사용합니다.

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

저는 인라인 스타일링을 선호하지 않기 때문에 대신 클래스를 사용하여 조건부 스타일링을 제어하고 싶습니다.리액트(React)의 사고방식으로 접근하면 어떨까요?아니면 그냥 인라인 스타일링으로 할까요?

 <div style={{ visibility: this.state.driverDetails.firstName != undefined? 'visible': 'hidden'}}></div>

위 코드를 확인합니다.그것으로 족하다.

클래스 이름을 사용하려면 반드시 클래스 이름을 사용하십시오.

className={completed ? 'text-strike' : null}

클래스명 패키지도 도움이 될 수 있습니다.이 기능을 사용하면 코드는 다음과 같습니다.

className={classNames({ 'text-strike': completed })}

조건부 스타일링을 하는 "올바른" 방법은 없습니다.당신에게 가장 잘 맞는 일을 하세요.저는 인라인 스타일링을 피하고 방금 설명한 방식으로 수업을 이용하는 것을 선호합니다.

POSTSCRIPT [06-Aug-2019]

React가 스타일링에 대해 의견이 없는 것은 사실이지만, 최근에는 스타일링된 컴포넌트나 감정이라는 CSS-in-JS 솔루션을 추천합니다.React를 처음 사용하는 경우 CSS 클래스나 인라인 스타일을 사용합니다.하지만 React에 익숙해지면 이러한 라이브러리 중 하나를 채택할 것을 권장합니다.모든 프로젝트에 사용하고 있습니다.

인라인 스타일을 조건부로 적용해야 할 경우(모두 적용 또는 없음) 이 표기법도 기능합니다.

style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}

'someCondition'이 충족되지 않으면 빈 개체를 전달합니다.

이 대신:

style={{
  textDecoration: completed ? 'line-through' : 'none'
}}

단락 회로를 사용하여 다음을 시도할 수 있습니다.

style={{
  textDecoration: completed && 'line-through'
}}

https://codeburst.io/javascript-short-circuit-conditionals-bbc13ac3e9eb

링크의 주요 정보 비트:

단락이란 AND 식(&)을 평가할 때 JavaScript에서 첫 번째 피연산자가 false일 경우 JavaScript가 단락되어 두 번째 피연산자는 쳐다보지도 않는다는 것을 의미합니다.

첫 번째 오퍼랜드가 false일 경우 false가 반환되므로 스타일에 어떤 영향을 미칠지 고려해야 합니다.

다른 솔루션은 베스트 프랙티스가 될 수도 있지만 공유할 가치가 있다고 생각했습니다.

인라인 스타일 처리

style={{backgroundColor: selected ? 'red':'green'}}

CSS 사용

js 단위로

className={`section ${selected && 'section_selected'}`}

css로

.section {
  display: flex;
  align-items: center;
} 
.section_selected{
  background-color: whitesmoke;
  border-width: 3px !important;
}

Js 스타일시트를 사용하여 동일한 작업을 수행할 수 있습니다.

다른 방법으로는 인라인 스타일 및 스프레드 연산자 사용

style={{
  ...completed ? { textDecoration: completed } : {}
}}

이 방법은 조건에 따라 여러 속성을 동시에 추가하는 경우에 유용합니다.

첫째, 스타일에 관해서는 당신의 의견에 동의합니다.-또한 인라인 스타일보다는 조건부로 수업을 적용하고 싶습니다(그리고 그렇게 하고 싶습니다.그러나 동일한 기술을 사용할 수 있습니다.

<div className={{completed ? "completed" : ""}}></div>

보다 복잡한 상태 집합의 경우 클래스 배열을 누적하여 적용합니다.

var classes = [];

if (completed) classes.push("completed");
if (foo) classes.push("foo");
if (someComplicatedCondition) classes.push("bar");

return <div className={{classes.join(" ")}}></div>;

조건에 따라 스타일을 지정하려면 스타일에 클래스 이름을 사용하는 것이 좋습니다.이 과제에는 여러 가지 방법이 있습니다.이게 그 중 두 가지입니다.

1.

    <div className={`another-class ${condition ? 'active' : ''}`} />

    <div className={`another-class ${condition && 'active'}`} />

 style={{
              whiteSpace: "unset",
              wordBreak: "break-all",
              backgroundColor: one.read == false && "#e1f4f3",
              borderBottom:'0.8px solid #fefefe'
            }}

나는 같은 질문에 대답하려다 우연히 이 질문을 발견했다.클래스 배열 및 참여에 대한 McCrohan의 접근법은 견고합니다.

지금까지의 경험을 통해, 저는 React로 변환되는 많은 레거시 루비 코드를 사용해 왔습니다.컴포넌트를 구축하면서 기존의 css 클래스와 인라인 스타일 모두에 손을 내밀고 있습니다.

컴포넌트 내부의 샘플 스니펫:

// if failed, progress bar is red, otherwise green 
<div
    className={`progress-bar ${failed ? 'failed' : ''}`}
    style={{ width: this.getPercentage() }} 
/>

또, 레거시 css 코드에 액세스 해, 컴포넌트와 함께 「패키지」해, 계속 진행됩니다.

그래서 그 라벨은 프로젝트에 따라 크게 달라지기 때문에 '최고'가 무엇인지 확실히 알 수 없다고 생각합니다.

특정 조건에서 인라인 스타일링을 적용할 수 있는 정렬 방식.

style={areFieldsDisabled ? {opacity: 0.5} : '' }

빈 할 수 .{}예를 들어 조건이 충족되지 않은 경우 초기 색상을 유지해야 하는 경우 배경색을 할당합니다.

style={ onError ? {backgroundColor: 'red'} : {} }

style={ completed ? {textDecoration: 'line-through'} : {} }

스타일링을 처리하는 가장 좋은 방법은 css 속성 세트를 가진 클래스를 사용하는 것입니다.

예:

<Component className={this.getColor()} />

getColor() {
    let class = "badge m2";
    class += this.state.count===0 ? "warning" : danger;
    return class;
}

이런 거 써도 돼요.

render () {
    var btnClass = 'btn';
    if (this.state.isPressed) btnClass += ' btn-pressed';
    else if (this.state.isHovered) btnClass += ' btn-over';
    return <button className={btnClass}>{this.props.label}</button>;
  }

또는 클래스 이름 NPM 패키지를 사용하여 동적 및 조건부 className 소품을 사용하기 쉽게 할 수 있습니다(특히 조건부 문자열 조작보다 더 쉽게 할 수 있습니다).

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

누군가 사용하는 경우Typescript)null리액트 스타일링을 사용하고 싶은 경우, 다음과 같은 해크를 제안합니다.

<p 
style={choiceStyle ? styles.choiceIsMade : styles.none}>
{question}
</p>

const styles = {
choiceIsMade: {...},
 none: {}
}

컴포넌트 상태에 따라 인라인 CSS를 조건부로 변경합니다.

이는 또한 React에서 조건부 스타일을 처리하는 올바른 방법입니다.

조건 ? expressionIfTrue : expressionIfFalse;

예 =>

{this.state.input.length > 15 ? inputStyle={border: '3px solid red'}: inputStyle }

이 코드는 입력 필드에 입력된 문자가 15개를 초과할 경우 입력 필드의 테두리가 빨간색으로 표시되고 테두리의 길이가 3px가 된다는 것을 의미합니다.

언급URL : https://stackoverflow.com/questions/35762351/correct-way-to-handle-conditional-styling-in-react