React教程九：条件渲染,重庆网站建设,重庆网站开发,重庆网络营销,重庆APP制作培训,重庆互联网

React教程九：条件渲染

作者：重庆互联网小徐发布时间：2023-03-16 浏览：17591 赞（1088）收藏评论（0）

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，你可以只渲染对应状态下的部分内容。

React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。

观察这两个组件:

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

再创建一个 Greeting 组件，它会根据用户是否登录来决定显示上面的哪一个组件。

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'));

这个示例根据 isLoggedIn 的值来渲染不同的问候语。

元素变量

你可以使用变量来储存元素。它可以帮助你有条件地渲染组件的一部分，而其他的渲染部分并不会因此而改变。

观察这两个组件，它们分别代表了注销和登录按钮：

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>
    );
  }}ReactDOM.render(
  <LoginControl />,
  document.getElementById('root'));

声明一个变量并使用 if 语句进行条件渲染是不错的方式，但有时你可能会想使用更为简洁的语法。接下来，我们将介绍几种在 JSX 中内联条件渲染的方法。

与运算符 &&

通过花括号包裹代码，你可以在 JSX 中嵌入任何表达式。这也包括 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地进行元素的条件渲染。

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>      <h1>Hello!</h1>      {unreadMessages.length > 0 &&        <h2>          You have {unreadMessages.length} unread messages.        </h2>      }    </div>
  );}const messages = ['React', 'Re: React', 'Re:Re: React'];ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root'));

之所以能这样做，是因为在 JavaScript 中，true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。

因此，如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

三目运算符

另一种内联条件渲染的方法是使用 JavaScript 中的三目运算符 condition ? true : false。

在下面这个示例中，我们用它来条件渲染一小段文本

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.    </div>
  );}

同样的，它也可以用于较为复杂的表达式中，虽然看起来不是很直观：

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

就像在 JavaScript 中一样，你可以根据团队的习惯来选择可读性更高的代码风格。需要注意的是，如果条件变得过于复杂，那你应该考虑如何提取组件。

阻止组件渲染

在极少数情况下，你可能希望能隐藏组件，即使它已经被其他组件渲染。若要完成此操作，你可以让 render 方法直接返回 null，而不进行任何渲染。

下面的示例中，<WarningBanner /> 会根据 prop 中 warn 的值来进行条件渲染。如果 warn 的值是 false，那么组件则不会渲染:

function WarningBanner(props) {  if (!props.warn) {    return null;  }
  return (
    <div className="warning">      Warning!    </div>
  );}class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true};
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(state => ({
      showWarning: !state.showWarning    }));
  }

  render() {
    return (
      <div>        <WarningBanner warn={this.state.showWarning} />        <button onClick={this.handleToggleClick}>          {this.state.showWarning ? 'Hide' : 'Show'}        </button>      </div>
    );
  }}ReactDOM.render(
  <Page />,
  document.getElementById('root'));

在组件的 render 方法中返回 null 并不会影响组件的生命周期。例如，上面这个示例中，componentDidUpdate 依然会被调用。

网友留言评论

我要评论