Reactjs : CJSX 중첩 된 조건

Question

React 구성 요소에서 중첩 된 조건부 논리를 처리하는 올바른 구문은 무엇입니까?

React.createClass 
render: -> 
    <div> 
    {if @props.showList 
     {for item in @props.myItems 
     {item} 
     } 
    else 
    } 
    </div> 

for 루프는 렌더링 될 수 있습니다. if/else 조건부 (자체적으로)를 렌더링 할 수 있습니다. 그러나 for 루프를 조건 내에 중첩하지 못합니다.

도움이 될 것입니다.

Answer 1

테스트하지는 않았지만 일반적인 JSX의 작동 방식에 따라 {expression} 만 JSX 모드에서 벗어나면됩니다.

프로그램은 JS 모드 (또는 여기서는 CS)로 시작하고 요소 태그가 발견되면 JSX 모드로 들어갑니다. JSX 모드에서 {foo}을 사용하면 JS 모드로 돌아갑니다. 거기에서 위의 규칙이 적용되며 태그를 시작하여 JSX 모드를 다시 입력 할 수 있습니다.

커피 스크립트 : 주석

render: -> 
    <div> 
    { 
    if @props.showList 
     for item in @props.myItems 
     item 

    else 
     <div>{foo}</div> 
    } 
    </div> 

커피 스크립트

내의

render: -> 

JSX

<div> 

커피 스크립트 JSX 내의

{ 
    if @props.showList 
     for item in @props.myItems 
     item 

    else 

커피 스크립트 내의

커피 스크립트

내의 JSX 내의 커피 스크립트 내의

JSX

 <div> 

커피 스크립트 JSX 내의 커피 스크립트 내의

  {foo} 

JSX 커피 스크립트

내의

 </div> 

JSX 커피 스크립트

내의

커피 스크립트는 하나의 표현으로 평가로 방금 한, 일반 커피 스크립트/CJSX 코드를 사용할 수있는 {} 섹션 내부

... 

Answer 2

: 나는 각 중첩 탈옥에 의존했다

React.createClass 
    render: -> 
    <div> 
     { 
     if @props.showList 
      for item in @props.myItems 
      <span key={item.id}>{item}</span> 
     else 
      <span>some other content</span> 
     } 
    </div>