jsx에서 조건문을 사용하는 더 좋은 방법이 있습니까?

Question

나는 지난 몇 주 동안 React를 배웠다. 그리고 내가 싫어하는 한 가지는 렌더링 함수 내에서 다른 경우에 3 항 연산자를 사용해야한다는 것이다. 같은

뭔가 :

function render() { 
    return (
     {x==="Let's go" ? <Go /> : <Hold on />} 
    ) 
} 

는 방법 나는 전통적인 jsx 구문과 그 문제에 전환하는 경우 - 다른 사람이나 반작용이 사용할 수 있습니까?

Answer 1

을 선호합니다.

1) 변수를 사용하십시오. 실제로 JSX 부분 (반환)에 들어가기 전에 원시 JS의 유연성을 사용하여 변수를 빌드 할 수 있습니다. 귀하의 예를 들어 ...

최상위 레벨을 래핑해야합니다. 단지 여분의 div를 넣어야합니다.

2) 기능을 사용하십시오.

renderBody() { 
    let body; 
    if (x === "Let's go") { 
     body = <Go /> 
    } else { 
     body = <Hold on />; 
    } 
    return (
     {body} 
    ) 
} 

render() { 
    return (
     <div> 
      {renderBody()} 
     </div> 
    ) 
} 

3) 배열 (# 1의 정말 일부를 사용)하지만 자주 가끔 내가 한 요소를 반환해야 시나리오를 찾을 수 있습니다 ..이 예는 아마 너무 단순하지만 당신은 아이디어를 얻을 수 있습니다 하지만 다른 시간에 요소의 가변 개수를 반환해야합니다. 함수의 맨 위에 배열을 만들고 배열에 요소를 푸시/언 쉬프트합니다. 배열을 만들 때마다 React가 올바르게 업데이트 할 수 있도록 각 요소에 대한 키를 제공해야합니다.

let els = [ 
    <div key="always">Always here</div> 
]; 
if (foo) { 
    els.push(<div key="ifFoo">Conditionally Here</div>) 
} 

그리고 나서 주 JSX에서 {els} 변수 만 사용하십시오.

4) 아무것도 렌더링하지 않으려면 null을 반환하십시오.

Answer 2

은 내가 더 복잡한 구성 요소의 렌더링 방법을 정리하기 위해 몇 가지 방법을 활용 구문

function render() { 
    if (x==="Let's go") return <Go />; 
    return <Hold on />; 
}