条件渲染
在React中，可以创建不同的组件来封装各种所需要的行为，也可以根据应用的变换状态只更新其中一部分。
首先创建一个Gretting组件，他会根据用户是否登录来显示不同的内容。
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
function Greeting(props){
const isLoggedIn = props.isLoggedIn;
if(isLoggedIn){
return <UserGreeting />
}else{
return <GuestGreeting />
}
}
ReactDOM.render(
<Greeting isLoggedIn={false} />,
document.getElementById('root')
)
元素变量
你可以使用变量来储存元素，可以用来有条件的渲染组件的一部分，输出的其他部分则不用修改。
以下的2个组件分别代表 注销 和 登录
//定义一个登录按钮小组件
function LoginButton(props){
return (
<button onClick={props.onClick}>
Login
</button>
)
}
//定义一个登出按钮小组件
function LogoutButton(props){
return (
<button onClick={props.onClick}>
Logout
</button>
)
}
然后，我们开始创建一个LoginControl的组件
他会根据当前状态来渲染<LoginButton />和<LogoutButton />以及显示的<Greeting />的内容
//登录状态1
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
//登录状态2
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
//条件渲染提示状态语
function Greeting(props){
const isLoggedIn = props.isLoggedIn;
if(isLoggedIn){
return <UserGreeting />
}else{
return <GuestGreeting />
}
}
//创建一个按钮登录小组件
function LoginButton(props){
return (
<button onClick={props.onClick}>
Login
</button>
)
}
//创建一个按钮登出小组件
function LogoutButton(props){
return (
<button onClick={props.onClick}>
Logout
</button>
)
}
//创建一个登录状态控制组件
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 = <LoginButton onClick={this.handleLogoutClick} />
}else{
button = <LogoutButton onClick={this.handleLoginClick} />
}
return(
<div class="box">
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
)
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
)
使用变量并且使用if语句，是条件渲染组件不出的方式，但有时候可以使用更加简洁的方式，可以使用jsx的方式
1.与运算符&&
可以使用花括弧包裹代码嵌入jsx中，其中包括js逻辑与&&，他能很方便的渲染一个元素
function Mailbox(props){
const unreadMessage = props.unreadMessage;
return(
<div>
<h1>hello</h1>
{unreadMessage.length>0&&
<h2>you have {unreadMessage.length} unread message</h2>
}
</div>
)
}
const message = ['react','reactdom','redux'];
ReactDOM.render(
<Mailbox unreadMessage={message} />,
document.getElementById('root')
)
//返回 you have 3 unread message
之所以可以这样做，是因为在javascript中，true&&表达式，会返回表达式，而false&&表达式，会返回false，false就会忽略跳过。
2.三目运算符
条件如果成立，执行do someting，否则执行冒号后语句
condition?'do someting':'do noting'
condition?true:false
demo有条件的渲染
//demo1
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
//demo2
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
像在 JavaScript 中一样，你可以根据团队的习惯选择更易读的方式。还要记住如果条件变得过于复杂，可能就是提取组件的好时机了。
3.阻止组件的渲染
在极少的情况下，你可能希望隐藏组件，即使其他组件会渲染该组件，让render方法返回null，而不产生他的渲染结果，就可以实现这个需求。
在下面的例子中，<WarningBanner /> 根据属性 warn 的值条件渲染。如果warn 的值是 false，则组件不会渲染：
function WarningBanner(props){
if(props.warn){
return null //或者return false 此处可以停止组件渲染
}
return (
<div className="warning">Warning!!!</div>
)
}
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(
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning?'warning的值为true':'warning的值为false'}
</button>
</div>
)
}
}
ReactDOM.render(
<Page />,
document.getElementById('root')
)
注意：
组件的render()方法返回null，并不会影响他的生命周期方法的回调，例如componentWillUpdate和componentDidUpdate,依然可以使用。
网友评论