详解React 条件渲染
在React中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。
React中的条件渲染和JavaScript中的一致，使用JavaScript操作符if或条件运算符来创建表示当前状态的元素，然后让React根据它们来更新UI。
先来看两个组件:
functionUserGreeting(props){
return欢迎回来!
;
}
functionGuestGreeting(props){
return请先注册。
;
}
我们将创建一个Greeting组件，它会根据用户是否登录来显示其中之一：
functionGreeting(props){
constisLoggedIn=props.isLoggedIn;
if(isLoggedIn){
return
元素变量
你可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分，而输出的其他部分不会更改。
在下面的例子中，我们将要创建一个名为LoginControl的有状态的组件。
它会根据当前的状态来渲染
classLoginControlextendsReact.Component{
constructor(props){
super(props);
this.handleLoginClick=this.handleLoginClick.bind(this);
this.handleLogoutClick=this.handleLogoutClick.bind(this);
this.state={isLoggedIn:false};
}
handleLoginClick(){
this.setState({isLoggedIn:true});
}
handleLogoutClick(){
this.setState({isLoggedIn:false});
}
render(){
constisLoggedIn=this.state.isLoggedIn;
letbutton=null;
if(isLoggedIn){
button=
与运算符&&
你可以通过用花括号包裹代码在JSX中嵌入任何表达式，也包括JavaScript的逻辑与&&，它可以方便地条件渲染一个元素。
functionMailbox(props){
constunreadMessages=props.unreadMessages;
return(
Hello!
{unreadMessages.length>0&&
您有{unreadMessages.length}条未读信息。
}
);
}
constmessages=['React','Re:React','Re:Re:React'];
ReactDOM.render(
在JavaScript中，true&&expression总是返回expression，而false&&expression总是返回false。
因此，如果条件是true，&&右侧的元素就会被渲染，如果是false，React会忽略并跳过它。
三目运算符
条件渲染的另一种方法是使用JavaScript的条件运算符:
condition?true:false。
在下面的例子中，我们用它来有条件的渲染一小段文本。
render(){constisLoggedIn=this.state.isLoggedIn;return(
Theuseris{isLoggedIn?'currently':'not'}loggedin.
);}
同样它也可以用在较大的表达式中，虽然不太直观：
render(){
constisLoggedIn=this.state.isLoggedIn;
return(
{isLoggedIn?(
阻止组件渲染
在极少数情况下，你可能希望隐藏组件，即使它被其他组件渲染。让render方法返回null而不是它的渲染结果即可实现。
在下面的例子中，
functionWarningBanner(props){
if(!props.warn){
returnnull;
}
return(
警告!
组件的render方法返回null并不会影响该组件生命周期方法的回调。例如，componentWillUpdate和componentDidUpdate依然可以被调用。
以上就是详解React条件渲染的详细内容，更多关于React条件渲染的资料请关注毛票票其它相关文章！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。