React 렌더링 함수에서 if...else... 문을 사용할 수 있나요?

Question

기본적으로 render() 함수 본문이 다음과 같은 반응 구성요소가 있습니다. (이것은 현재 작동하지 않음을 의미하는 이상적인 것입니다.)< /p> ;

render(){
    반품 (
        <div>
            <요소1/>
            <요소2/>

            // 참고: 논리만 해당되며 코드는 여기서 작동하지 않습니다.
            if (this.props.hasImage) <ElementWithImage/>
            else <이미지 없는 요소/>

        </div>
    )
}

Answer 1

실제로 OP가 요청한 것을 정확하게 수행할 수 있는 방법이 있습니다. 다음과 같이 익명 함수를 렌더링하고 호출하면 됩니다.

으아악

Answer 2

완전히 똑같지는 않지만 해결 방법이 있습니다. React 문서에 살펴보아야 할 조건부 렌더링에 대한 섹션이 있습니다. 다음은 인라인 if-else를 사용하여 수행할 수 있는 작업의 예입니다.

으아악

렌더 함수 내에서 처리할 수도 있지만 jsx를 반환하기 전에 처리할 수 있습니다.

으아악

또한 언급할 가치가 있는 것은 ZekeDroid가 댓글에서 언급한 내용입니다. 단지 조건을 확인하고 조건을 충족하지 않는 특정 스니펫을 렌더링하고 싶지 않은 경우 && 运算符를 사용할 수 있습니다.

으아악