function UserGreeting(props) {
return <h1>welcome back</h1>;
}
function GuestGreeting(props) {
return <h1>pls. sign up</h1>;
}
function Greeting(props) {
const isLoggerIn = props.isLoggerIn;
if(isLoggerIn){
return <UserGreeting />;
}else {
return <GuestGreeting />;
}
}
ReactDOM.render(
<Greeting isLoggerIn={false} />,
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 = {isLoggerIn:false};
}
handleLoginClick() {
this.setState({isLoggerIn:true});
}
handleLogoutClick() {
this.setState({isLoggerIn:false});
}
render() {
const isLoggerIn = this.state.isLoggerIn;
let button;
if(isLoggerIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
}else{
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggerIn={isLoggerIn} />
{button}
</div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
如果在一个JSX中嵌入javascript逻辑运算符&&,true && expression
会显示expression内容,如果是false && expression
会忽略后面的表达式
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')
);
阻止组件渲染
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')
);