react渲染方式的几种是什么

146 阅读 0 评论 97 点赞

我是靠谱客的博主开放汉堡，这篇文章主要介绍react渲染方式的几种是什么，现在分享给大家，希望可以做个参考。

本教程操作环境：Windows7系统、react17.0.1版、Dell G3电脑。

React 组件条件渲染的几种方式

一、条件表达式渲染（适用于两个组件二选一的渲染）

复制代码render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} ></LogoutButton>
      ) : (
        <LoginButton onClick={this.handleLoginClick} ></LoginButton>
      )}
    </div>
  );
}1
2
3
4
5
6
7
8
9
10
11
12
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (
        <LoginButton onClick={this.handleLoginClick} />
      )}
    </div>
  );
}
登录后复制

二、&& 操作符渲染 (适用于一个组件有无的渲染)

复制代码function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}1
2
3
4
5
6
7
8
9
10
11
12
13
function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}
登录后复制

三、利用变量输出组件渲染（适用于有多个组件多种条件下的渲染）

复制代码render() {
    const isLoggedIn = this.state.isLoggedIn;
 
    const button = isLoggedIn ? (
      <LogoutButton onClick={this.handleLogoutClick} ></LogoutButton>
    ) : (
      <LoginButton onClick={this.handleLoginClick} ></LoginButton>
    );
 
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} ></Greeting>
        {button}
      </div>
    );
  }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
render() {
    const isLoggedIn = this.state.isLoggedIn;
 
    const button = isLoggedIn ? (
      <LogoutButton onClick={this.handleLogoutClick} />
    ) : (
      <LoginButton onClick={this.handleLoginClick} />
    );
 
    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
登录后复制

四、利用函数方法输出组件或者利用函数式组件进行渲染（适用于多个子组件需要根据复杂的条件输出的情况）

1. 函数方式

复制代码renderButton(){
    const isLoggedIn = this.state.isLoggedIn;
    if(isLoggedIn)
    {
       return (<LogoutButton onClick={this.handleLogoutClick} ></LogoutButton>);
    }
    else
    {
      return (<LoginButton onClick={this.handleLoginClick} ></LoginButton>);
    }
}
 
render() {
    return (
      <div>
        <Greeting ></Greeting>
        {this.renderButton()}
      </div>
    );
  }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 ></UserGreeting>;
  }
  return <GuestGreeting ></GuestGreeting>;
}
 
ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} ></Greeting>,
  document.getElementById('root')
);1
2
3
4
5
6
7
8
9
10
11
12
13
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('root')
);
登录后复制