[reactjs] React render 함수에서 if… else… 문을 사용할 수 있습니까?

Program / 글쓴이

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

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // note: code does not work here
            if (this.props.hasImage) <MyImage />
            else <OtherElement/>
        </div>
    )
}

답변

정확히는 아니지만 해결 방법이 있습니다. 리 액트 문서 에 조건부 렌더링에 대한 섹션 이 있습니다. 다음은 인라인 if-else를 사용하여 수행 할 수있는 작업의 예입니다.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}

render 함수 내에서 처리 할 수도 있지만 jsx를 반환하기 전에. 

if (isLoggedIn) {
  button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
  button = <LoginButton onClick={this.handleLoginClick} />;
}

return (
  <div>
    <Greeting isLoggedIn={isLoggedIn} />
    {button}
  </div>
);

ZekeDroid가 의견에서 가져온 것을 언급하는 것도 가치가 있습니다. 조건 만 확인하고 준수하지 않는 특정 코드를 렌더링하지 않으려면 && operator.

  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );

답변

실제로 OP가 요구하는 것을 정확히 수행하는 방법이 있습니다. 다음과 같이 익명 함수를 렌더링하고 호출하십시오.

render () {
  return (
    <div>
      {(() => {
        if (someCase) {
          return (
            <div>someCase</div>
          )
        } else if (otherCase) {
          return (
            <div>otherCase</div>
          )
        } else {
          return (
            <div>catch all</div>
          )
        }
      })()}
    </div>
  )
}

답변

당신이 사용하는 어떤을 렌더링 할 수 conditional처럼 문을 if, else:

 render() {
    const price = this.state.price;
    let comp;

    if (price) {

      comp = <h1>Block for getting started with {this.state.price}</h1>

    } else {

      comp = <h1>Block for getting started.</h1>

    }

    return (
      <div>
        <div className="gettingStart">
          {comp}
        </div>
      </div>
    );
  }

답변

TERNARY 연산자 에 대해 기억해야합니다.

:

따라서 코드는 다음과 같습니다.

render(){
    return (
        <div>
            <Element1/>
            <Element2/>
            // note: code does not work here
            {
               this.props.hasImage ?  // if has image
               <MyImage />            // return My image tag
               :
               <OtherElement/>        // otherwise return other element

             }
        </div>
    )
}

답변

조건에 요소를 표시하려면 다음과 같이 사용할 수 있습니다.

renderButton() {
    if (this.state.loading) {
        return <Spinner size="small" spinnerStyle={styles.spinnerStyle} />;
    }

    return (
        <Button onPress={this.onButtonPress.bind(this)}>
            Log In
        </Button>
    );
}

그런 다음 render 함수 내에서 help 메서드를 호출합니다.

<View style={styles.buttonStyle}>
      {this.renderButton()}
</View>

또는 return 내부에서 다른 조건 방법을 사용할 수 있습니다.

{this.props.hasImage ? <element1> : <element2>}

답변

if else 구조의 속기는 JSX에서 예상대로 작동합니다.

this.props.hasImage ? <MyImage /> : <SomeotherElement>

이 DevNacho 블로그 게시물에서 다른 옵션을 찾을 수 있지만 속기 사용이 더 일반적입니다. 당신이 절 경우 더 큰이해야 할 경우 함수를 작성해야하는 반환 또는 A 성분 또는 구성 요소 B.

예를 들면 :

this.setState({overlayHovered: true});

renderComponentByState({overlayHovered}){
    if(overlayHovered) {
        return <overlayHoveredComponent />
    }else{
        return <overlayNotHoveredComponent />
    }
}

오버레이 Hovered를 매개 변수로 제공하면 this.state에서 구조를 해제 할 수 있습니다. 그런 다음 render () 메서드에서 해당 함수를 실행합니다.

renderComponentByState(this.state)

답변

둘 이상의 조건이 필요한 경우이를 시도해 볼 수 있습니다.

https://www.npmjs.com/package/react-if-elseif-else-render

import { If, Then, ElseIf, Else } from 'react-if-elseif-else-render';

class Example extends Component {

  render() {
    var i = 3; // it will render '<p>Else</p>'
    return (
      <If condition={i == 1}>
        <Then>
          <p>Then: 1</p>
        </Then>
        <ElseIf condition={i == 2}>
          <p>ElseIf: 2</p>
        </ElseIf>
        <Else>
          <p>Else</p>
        </Else>
      </If>
    );
  }
}