ReactJS JSX에서 nested if else 문을 실행하는 방법은 무엇입니까?

ReactJS JSX에서 nested if else 문을 실행하는 방법은 무엇입니까?

ReactJS JSX에 있는 경우 nested를 할 수 있는지 알고 싶습니다.

여러 가지 방법을 시도해 봤지만 잘 되지 않습니다.

찾고 있습니다

if (x) {
  loading screen
} else {
  if (y) {
    possible title if we need it
  }
  main 
}

이것을 시도해 봤지만 렌더링할 수 없다.나는 여러 가지 방법을 시도했다.중첩된 if를 추가하면 항상 깨집니다.

{
  this.state.loadingPage ? (
    <div>loading page</div>
  ) : (
    <div>
      this.otherCondition && <div>title</div>
      <div>body</div>
    </div>
  );
}

갱신하다

저는 이것을 renderContent로 이동하고 함수를 호출하는 솔루션을 선택하게 되었습니다.하지만 두 답변 모두 효과가 있었다.단순한 렌더와 복잡한 경우 renderContent의 경우 인라인 솔루션을 사용할 수 있다고 생각합니다.

감사해요.

타이틀과 본체는 용기에 싸야 합니다.그건 디바일 수도 있어.대신 파편을 사용하면 돔에 있는 요소가 하나 줄어들게 됩니다.

{ this.state.loadingPage
  ? <span className="sr-only">Loading... Registered Devices</span>
  : <>
      {this.state.someBoolean
        ? <div>some title</div>
        : null
      }
      <div>body</div>
    </>
}

3원짜리 문장은 읽기 어렵기 때문에 내포하지 말 것을 권하고 싶다.때로는 삼진법을 사용하는 것보다 일찍 돌아오는 것이 더 우아할 때가 있다.또,isBool && component3진법의 진정한 부분만 원한다면요

renderContent() {
  if (this.state.loadingPage) {
    return <span className="sr-only">Loading... Registered Devices</span>;
  }

  return (
    <>
      {this.state.someBoolean && <div>some title</div>}
      <div>body</div>
    </>
  );
}

render() {
  return <div className="outer-wrapper">{ this.renderContent() }</div>;
}

구문에 대한 주의사항someBoolean && "stuff": 잘못하면someBoolean로 설정되어 있다.0또는NaN, 그 번호가 DOM 에 렌더링 됩니다.그래서 만약 "부울리안"이 가짜 번호일 수 있다면(someBoolean ? "stuff" : null).

자주 권장되는 3진 연산자를 네스트하거나 다른 곳에서 재사용되지 않는 개별 함수를 작성하는 대신 인라인 식을 호출할 수 있습니다.

<div className="some-container">
{
   (() => {
       if (conditionOne)
          return <span>One</span>
       if (conditionTwo)
          return <span>Two</span>
       else (conditionOne)
          return <span>Three</span>
   })()
}
</div>

다음과 같이 여러 조건을 선택하여 구성요소를 렌더링할 수 있습니다.

  this.state.route === 'projects'
  ? 
  <div> <Navigation onRouteChange={this.onRouteChange}/> Projects</div>
  :
  this.state.route === 'about'
  ?
  <div> <Navigation onRouteChange={this.onRouteChange}/> About</div>
  :
  this.state.route === 'contact'
  ?
  <div> <Navigation onRouteChange={this.onRouteChange}/> Contact</div>
  :
  <p> default </p>

가능한 한 많은 문을 중첩할 수 있습니다.이 코드에 따라 주십시오.this.state.firstTestValue,this.state.someTestValue그리고.this.state.thirdValueTest시/도 테스트 값입니다.

{this.state.firstTestValue
    ? <div >First Title</div>
    : [
        this.state.someTestValue
            ? <div>Second Title</div>
            : [
                this.state.thirdValueTest 
                ? <div>Some Third Title</div> 
                : <div>Last Title</div>
            ]
    ]
}

대체 코드로는 유효한 JavaScript/JSX 식이 없습니다.

(
  this.state.someBoolean ?
  (<div>some title</div>):(<div>some other title</div>)
  <div>body</div>
)

이것을 심플화해서

(
  true ? 42 : 21
  3
)

그러면 오류가 발생합니다.

학습되지 않은 구문 오류:예기치 않은 번호(...)

두 개의 표현만 옆에 둘 수는 없어요.

대신 조건부 연산자의 false 분기에서 단일 값을 반환해야 합니다.다른 JSX 요소에 삽입하기만 하면 됩니다.

(
  <div>
    {this.state.someBoolean ? (<div>some title</div>) : (<div>some other title</div>)}
    <div>body</div>
  </div>
)

"다른 제목"이 표시될 때 "본문"만 표시하려면 이동해야 합니다.<div>body</div>조건 연산자의 잘못된 분기에 들어갑니다.

(
  this.state.someBoolean ?
    (<div>some title</div>) :
    (<div>
       <div>some other title</div>
       <div>body</div>
    </div>)
)

아니면 네가 원할 수도 있어

(
  <div>
    {this.state.someBoolean ? (<div>some title</div>) : null}
    <div>body</body>
  </div>
)

다른 답변에서 알 수 있듯이, 다른 응답이 있을 경우 중첩을 수행하는 방법은 다양합니다.어떤 것을 사용할지는 상황과 선호도에 따라 다릅니다.

내 생각에 최상의 코드 가독성을 위해 이 경우 other의 콘텐츠를 다른 함수로 이동하는 것이 가장 좋을 것 같습니다.

renderContent() {
     return (
         <div>
             { this.otherCondition && <div>title</div> }
             <div>body</div>
         </div>
     );
}

render() {
    return (
        <div>
            { ... }
            {
                this.state.loadingPage ?
                    <div>loading page</div>
                    :
                    this.renderContent()
            }
            { ... }
        </div>
    )
}

또는 간단한 경우(다른 요소가 렌더링되지 않은 경우) 다음과 같이 하겠습니다.

render() {
    if (this.state.loadingPage) {
        return (
            <div>loading page</div>
        )
    }
    return (
        <div>
            { this.otherCondition && <div>title</div> }
            <div>body</div>
        </div>
    );
}

React의 조건부 렌더링에 대한 기사가 있으니 이 주제에 대한 자세한 내용을 알고 싶으시면 확인하시기 바랍니다.

언급URL : https://stackoverflow.com/questions/37312122/how-to-do-a-nested-if-else-statement-in-reactjs-jsx