Blog

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之后，页面内容：

返回>>

请登录后再发表评论。

评论列表:

目前还没有人发表评论