반응의 다양한 렌더링 방법은 무엇입니까?

React 렌더링 방법은 다음과 같습니다. 1. 두 구성 요소의 렌더링에 적합한 조건식을 사용한 렌더링 2. 구성 요소 유무에 관계없이 "&&" 연산자를 사용한 렌더링 3. 가변 출력 구성 요소 렌더링 사용 기능적 메서드를 사용하여 구성 요소를 출력하거나 기능적 구성 요소를 사용하여 렌더링합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React 컴포넌트의 조건부 렌더링의 여러 가지 방법

1. 조건식 렌더링(두 컴포넌트의 렌더링에 적용 가능)

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

2. && 연산자 렌더링(사용 여부에 따라 적용 가능한 렌더링) 컴포넌트 존재 여부)

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

3. 변수를 사용하여 컴포넌트 렌더링 출력(다양한 조건에서 여러 컴포넌트로 렌더링하는 데 적합)

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

4. 함수형 메서드를 사용하여 컴포넌트를 출력하거나 함수형 표현식을 사용합니다. 복잡한 조건에 따라 여러 하위 구성 요소를 출력해야 하는 상황에 적용 가능)

1. 기능적 접근

renderButton(){
    const isLoggedIn = this.state.isLoggedIn;
    if(isLoggedIn)
    {
       return (<LogoutButton onClick={this.handleLogoutClick} />);
    }
    else
    {
      return (<LoginButton onClick={this.handleLoginClick} />);
    }
}
 
render() {
    return (
      <div>
        <Greeting />
        {this.renderButton()}
      </div>
    );
  }

2. 기능적 구성 요소

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}
 
ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById(&#39;root&#39;)
);

[관련 권장 사항: Redis 비디오 튜토리얼]

위 내용은 반응의 다양한 렌더링 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!