小编给大家分享一下React中条件渲染的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联公司专业为企业提供城中网站建设、城中做网站、城中网站设计、城中网站制作等企业网站建设、网页设计与制作、城中企业网站模板建站服务，10多年城中做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
前言
在React中，你可以创建不同的组件各自封装你需要的东西。之后你可以只渲染其中的一部分，这取决于应用的state（状态）。
条件渲染
可以根据state的值进行组件的条件渲染。例如：
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return ;
}
return ;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
,
document.getElementById('root')
);你还可以用变量去存储组件，以便进行条件筛选，使得渲染函数的返回值更加清爽，例如：
class LoginControl extends React.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() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = ;
} else {
button = ;
}
return (
{button}
);
}
}
ReactDOM.render(
,
document.getElementById('root')
);还可以使用短操作符来实现条件筛选，可以用更短的代码写出渲染结果。例如&&来替代if，?:来替代if else, 例如：
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
Hello!
{unreadMessages.length > 0 &&
You have {unreadMessages.length} unread messages.
}
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
,
document.getElementById('root')
);render() {
const isLoggedIn = this.state.isLoggedIn;
return (
The user is {isLoggedIn ? 'currently' : 'not'} logged in.
);
}这种跟更大的表达式的写法也可以，但是不推荐，因为代码就不是很直观了。
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
{isLoggedIn ? (
) : (
)}
);
}如果组件有时候需要渲染出来，而有时候不需要渲染出来，在不需要渲染的时候返回null即可。例如：
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
Warning!
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true}
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
}
render() {
return (
