登录 主页

reactjs Conditional Rendering(条件渲染)

2024-06-18 11:27AM

参考:https://legacy.reactjs.org/docs/conditional-rendering.html

在React中,可以创建不同的组件来封装所需的行为。然后,可以仅渲染其中的一些,具体取决于应用程序的状态。

React中的条件渲染的工作方式与JavaScript中条件的工作方式相同。

使用JavaScript运算符,例如:if或条件(三元)运算符来创建表示当前状态的元素

考虑这两个组件:

function UserGreeting(props) {
  return <h1>Welcome bacak!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

我们将创建一个Greeting根据用户是否登录显示以下组件之一的组件:

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

Greeting文件整体代码如下:

import React from 'react';
import ReactDOM from 'react-dom/client';

function UserGreeting(props) {
  return <h1>Welcome bacak!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />; //true
  }
  return <GuestGreeting />; //false
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greeting isLoggedIn={false} />);

export default Greeting;

页面显示情况如下:

 

上面这个示例可以根据isLoggedIn prop的值呈现不同的问候语

元素变量

我们可以使用变量来存储元素,这可以帮助我们有条件地渲染组件的一部分,而输出的其余部分不变。

考虑这两个表示“注销”和“登录”按钮的新组件:

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

下面的例子中,我们将创建一个名为LoginControl的有状态组件

它将呈现<LoginButton />或者<LogoutButton />取决于其当前状态。它还会渲染一个<Greeting />从前面的例子来看: 

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

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

const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render(<LoginControl />);

LoginControl文件整体代码内容如下:

import React from 'react';
import ReactDOM from 'react-dom/client';

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

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

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<LoginControl />);

export default LoginControl;

页面显示情况如下:

默认页面内容:

点击Login之后,页面内容:

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论