什么是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条件渲染的详细内容，更多请关注0133技术站其它相关文章！