130_React笔记4_元素渲染,条件渲染,阻止渲染
其他
2018-12-26 11:56:48
阅读次数: 0
一,元素的渲染
- 元素渲染
- 更新渲染
- 更新界面的唯一办法是创建一个新的元素,然后将它传入 ReactDOM.render() 方法
- React DOM 首先会比较元素内容先后的不同,而在渲染过程中只会更新改变了的部分
-
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
二,条件渲染
- if等条件运算符
-
//元素变量
function UserGreeting(props) {
return <h1>欢迎回来!</h1>;
}
function GuestGreeting(props) {
return <h1>请先注册。</h1>;
}
//条件函数
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
使用:
<Greeting isLoggedIn={false} />
<Greeting isLoggedIn={true} />
- 与运算符 &&
-
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
您有 {unreadMessages.length} 条未读信息。
</h2>
}
</div>
);
}
使用:
<Mailbox unreadMessages={''}/>
<Mailbox unreadMessages={'messages'} />
- 三目运算符
-
function Mailbox2(props) {
const isLoggedIn = props.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
使用:
<Mailbox2 isLoggedIn={true}/>
三,阻止渲染
- 让组件返回null,就不会渲染
-
// 可以不被渲染的元素
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">
警告!
</div>
);
}
// 主渲染
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} />
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? '隐藏' : '显示'}
</button>
</div>
);
}
转载自blog.csdn.net/a_horse/article/details/85229853