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

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

---

지금 React를하고 있는데 조건부 스타일링을위한 "올바른"방법이 있는지 궁금합니다. 튜토리얼에서 그들은

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

인라인 스타일링을 사용하지 않는 것을 선호하므로 대신 클래스를 사용하여 조건부 스타일을 제어하고 싶습니다. React 사고 방식으로 어떻게 접근할까요? 아니면이 인라인 스타일링 방식을 사용해야합니까?

---

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

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

classnames 패키지가 도움 이 될 수도 있습니다. 이를 통해 코드는 다음과 같습니다.

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

조건부 스타일을 수행하는 "올바른"방법은 없습니다. 당신에게 가장 잘 맞는 것을하십시오. 나는 인라인 스타일링을 피하고 방금 설명한 방식으로 클래스를 사용하는 것을 선호합니다.

POSTSCRIPT [2019 년 8 월 6 일]

React가 스타일링에 대해 의견이없는 것은 사실이지만 요즘에는 CSS-in-JS 솔루션을 권장합니다. 즉 스타일 구성 요소 또는 감정 . React를 처음 사용하는 경우 처음부터 CSS 클래스 또는 인라인 스타일을 고수하십시오. 그러나 React에 익숙해지면 이러한 라이브러리 중 하나를 채택하는 것이 좋습니다. 모든 프로젝트에서 사용합니다.

---

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

위의 코드를 확인하십시오. 그것은 트릭을 할 것입니다.

---

첫째, 스타일 문제에 동의합니다. 인라인 스타일보다는 조건부로 클래스를 적용 할 것입니다. 그러나 동일한 기술을 사용할 수 있습니다.

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

---

나는 같은 질문에 대답하는 동안이 질문을 발견했다. 클래스 배열 및 조인에 대한 McCrohan의 접근 방식은 견고합니다.

제 경험을 통해 저는 React로 변환되는 많은 레거시 루비 코드로 작업 해 왔으며 구성 요소를 구축하면서 기존 CSS 클래스와 인라인 스타일 모두에 도달했습니다.

구성 요소 내부의 예제 스 니펫 :

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

다시 말하지만, 레거시 CSS 코드에 손을 뻗어 컴포넌트와 함께 "패키징"하고 계속 진행합니다.

그래서 나는 그 레이블이 당신의 프로젝트에 따라 크게 다를 것이기 때문에 무엇이 "최고"인지에 대해 약간의 공기 중에 있다고 느낍니다.

---

스타일을 처리하는 가장 좋은 방법은 CSS 속성 집합이있는 클래스를 사용하는 것입니다.

예:

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

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

---

대신 :

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

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

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

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

링크의 핵심 정보 :

Short circuiting means that in JavaScript when we are evaluating an AND expression (&&), if the first operand is false, JavaScript will short-circuit and not even look at the second operand.

It's worth noting that this would return false if the first operand is false, so might have to consider how this would affect your style.

The other solutions might be more best practice, but thought it would be worth sharing.

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