条件渲染

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

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

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

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

export default Greeting;

import Greeting from "./components/Greeting";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Greeting isLoggedIn={true} />);

短路运算

不渲染

const count = false;
return (
  <div>
    {count && 
      <h1>Messages: {count}</h1>
    }
  </div>
);

渲染 <div>0</div>

const count = 0;
return (
  <div>
    {count && 
      <h1>Messages: {count}</h1>
    }
  </div>
);

三目运算

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

阻止渲染

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