React学习之——条件渲染(个人条记)

手机游戏开发者 · 2024-9-27 07:54:38

React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 大概条件运算符去创建元向来表现当前的状态，然后让 React 根据它们来更新 UI。

if运算符

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

lease sign up.</h1>;}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'));与运算符 &&

通过花括号包裹代码，你可以在 JSX 中嵌入任何表达式。这也包罗 JavaScript 中的逻辑与 (&&) 运算符。它可以很方便地举行元素的条件渲染。
function Mailbox(props) {  const unreadMessages = props.unreadMessages;  return ( <div>    <h1>Hello!</h1>    {/* 在jsx中通过&&来判定是否展示相干内容 */}    {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 中的三目运算符 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>  );}制止组件渲染

在少少数环境下，你大概盼望能隐蔽组件，纵然它已经被其他组件渲染。若要完成此操纵，你可以让 render 方法直接返回 null，而不举行任何渲染。
function WarningBanner(props) {  if (!props.warn) { return null; // return null 表现制止渲染组件  }  return ( <div className="warning">    Warning! </div>  );}在组件中返回 null 并不会影响组件的生命周期。比方，上面这个示例中，componentDidUpdate生命周期依然会被调用。

React学习之——条件渲染(个人条记)

所属分类: 问答交流

新帖推荐: 30日

推荐作品