小编给大家分享一下React中条件渲染的示例分析，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
成都创新互联专注于梧州企业网站建设,
响应式网站开发,
商城网站制作。梧州网站建设公司,为梧州等地区提供建站服务。全流程定制制作，专业设计，全程项目跟踪，
成都创新互联专业和态度为您提供的服务
前言
在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 (
