React学习（七）：条件渲染

最新推荐文章于 2022-10-14 20:13:51 发布

奇诗

最新推荐文章于 2022-10-14 20:13:51 发布

阅读量295

点赞数

分类专栏：【React学习】文章标签： react

本文链接：https://blog.csdn.net/Allen_6/article/details/109636800

版权

【React学习】专栏收录该内容

9 篇文章 2 订阅

订阅专栏

本文介绍了React中如何实现条件渲染，包括使用if语句、三元运算符、与运算符及switch...case语句。此外，还展示了如何通过return null阻止组件渲染，并提供了一个交互式的例子，展示如何根据用户登录状态控制组件显示。

摘要由CSDN通过智能技术生成

一、条件渲染

React 创建不同的组件来封装各种你需要的行为。然后依据应用的不同状态，你可以只渲染对应状态下的部分内容。
React 条件渲染和 JavaScript 中的一样，使用 JavaScript 操作符 if 或条件运算符去创建元素来表现当前的状态。
先看看这两组件：

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

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

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

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

二、条件渲染方式

1、if类语句
if类语句条件渲染很简单，可以使用if语句 或 if…else语句 或if…else if…else 语句等等

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

2、三元运算符
三目运算符 condition ? true : false。用它来代替上面的if语句渲染。

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <UserGreeting />:<GuestGreeting />;
}

3、与运算符 &&
true && expression 总是会返回 expression, 而 false && expression 总是会返回 false。

//三元运算符：
//function Greeting(props) {
//  const isLoggedIn = props.isLoggedIn;
//   return isLoggedIn ? <UserGreeting />:null;
//}
//&&运算符：可以使返回 null 的情况的条件渲染更加的简洁
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn && <UserGreeting />;
}

4、switch…case语句
多种条件渲染的情况可以使用switch…case

function Greeting(props) {
  const str = props.loggedStr;
   switch (str) {
    case "user":
      return <UserGreeting />;
    case "guest":
      return <GuestGreeting />;
    default:
      return null;
	}
}
ReactDOM.render(
  <Greeting loggedStr={"user"} />,
  document.getElementById('root')
);

注意switch…case语句永远要加上default情况，因为React组件要么返回元素，要么返回null

三、阻止组件渲染

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

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 依然会被调用。
·········································································································································
本文介绍React条件渲染~~请大家多多指教，能get到知识点不要忘了关注点个赞~。