React :条件分支结构

条件渲染

在 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}