React学习之条件视图渲染（六）

1.条件化视图渲染的必要性

state

class Creeting extends React.Component{
constructor(props){
super(props);
this.state = {
isLoggedIn : false
};
this.changeLog = this.changeLog.bind(this);
}

changeLog(){
console.log('-------');
this.setState((preState, props) => ({
isLoggedIn : !preState.isLoggedIn
}));
}

render(){
if(this.state.isLoggedIn) return <h1 onClick={this.changeLog}>Welcome back!</h1>;
else return <h1 onClick={this.changeLog}>Please sign up.</h1>;
}
}

ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Creeting />,
document.getElementById('example')
);

props

DOM

<Creeting onClick={func}/>

func

props.onClick

DOM

JSX

2.逻辑运算符的运用(三元运算符的使用就不说了)

function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);

unreadMessages.length > 0

true

||

render

null

function WarningBanner(props) {
if (!props.warn) {
return null;
}

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 ? 'Hide' : 'Show'}
</button>
</div>
);
}
}

ReactDOM.render(
<Page />,
document.getElementById('root')
);

React