React のさまざまなレンダリング方法には何がありますか?

React レンダリング メソッドには次のものが含まれます: 1. 条件式を使用したレンダリング (2 つのコンポーネントのレンダリングに適しています)、2. 「&&」演算子を使用したレンダリング (コンポーネントの有無にかかわらずレンダリングに適しています)、3. 変数出力を使用します。レンダリング用のコンポーネント; 4. 関数メソッドを使用してコンポーネントを出力するか、関数コンポーネントをレンダリングに使用します。

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

React コンポーネントを条件付きでレンダリングするいくつかの方法

1. 条件式のレンダリング (2 つのコンポーネントに適用可能) 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 ビデオ チュートリアル

]

以上がReact のさまざまなレンダリング方法には何がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。