什么是react条件渲染

什么是react条件渲染

在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分,或者可以根据不同的状态,渲染不同的组件。这就是条件渲染。不同于Vue的v-if,v-show等框架提供的api,React中的条件渲染的工作方式与JavaScript中条件工作的方式相同。

以下是一个条件渲染的例子:

function UserGreeting(props) {
  return <h1>欢迎回来!</h1>;
}
function GuestGreeting(props) {
  return <h1>请先注册。</h1>;
}

我们将创建一个 Greeting 组件,它会根据用户是否登录来显示其中之一:

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <UserGreeting / > ;
    }
    return <GuestGreeting / > ;
}
ReactDOM.render( 
    // 尝试修改 isLoggedIn={true}:  
    <Greeting isLoggedIn={false} />, 
    document.getElementById('example')
);

本文来自React答疑栏目,欢迎学习!

以上就是什么是react条件渲染的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏