react把表格渲染好ui_react 入坑笔记（五） - 条件渲染和列表渲染
條件渲染和列表渲染
一、條件渲染
條件渲染較簡(jiǎn)單，使用 JavaScript 操作符 if 或條件運(yùn)算符來創(chuàng)建表示當(dāng)前狀態(tài)的元素，然后讓 React 根據(jù)它們來更新 UI。
貼一個(gè)小栗子：
function UserGreeting(props) {
return
歡迎回來!
;}
function GuestGreeting(props) {
return
請(qǐng)先注冊(cè)。
;}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return ;
}
return ;
}
ReactDOM.render(
// 嘗試修改 isLoggedIn={true}:
,
document.getElementById('example')
);
當(dāng)然，得益于 jsx 的語法，我們可以用變量來緩存元素或者組件：
function UserGreeting(props) {
return
歡迎回來!
;}
function GuestGreeting(props) {
return
請(qǐng)先注冊(cè)。
;}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return ;
}
return ;
}
function LoginButton(props) {
return (
登陸
);
}
function LogoutButton(props) {
return (
退出
);
}
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('example')
);
阻止渲染的栗子：
function WarningBanner(props) {
if (!props.warn) {
return null; // 必須寫 null，不寫運(yùn)行會(huì)報(bào)錯(cuò)
}
return (
警告!
);
}
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 (
{this.state.showWarning ? '隱藏' : '顯示'}
);
}
}
ReactDOM.render(
,
document.getElementById('example')
);
注意：組件的 render 方法返回 null 并不會(huì)影響該組件生命周期方法的回調(diào)。例如，componentWillUpdate 和 componentDidUpdate 依然可以被調(diào)用。
二、列表渲染
列表渲染可以使用 js 中的 .map() 來進(jìn)行。(map 返回一個(gè)經(jīng)過邏輯處理的新數(shù)組)
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
{number}
);
return (
- {listItems}
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
,
document.getElementById('example')
);
和 vue 相同，需要給每個(gè)列表元素綁定一個(gè) key，便于 React 識(shí)別哪些元素發(fā)生了變化。
function ListItem(props) {
return
{props.value};}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
);
return (
{listItems}
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
,
document.getElementById('example')
);
注意：key 會(huì)作為給 React 的提示，但不會(huì)傳遞給組件，因此，組件并不會(huì)知道傳遞給它的 key。
在 jsx 中使用 map()：
function ListItem(props) {
return
{props.value};}
function NumberList(props) {
const numbers = props.numbers;
return (
{numbers.map((number) =>
value={number} />
)}
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
,
document.getElementById('example')
);
對(duì)比一下，只是少了聲明?listItems 語句，并把后面的 map() 搬到 jsx 中。
總結(jié)
以上是生活随笔為你收集整理的react把表格渲染好ui_react 入坑笔记（五） - 条件渲染和列表渲染的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： powershell设置了权限依旧无法运
- 下一篇： java接口文档生成工具_【分享】接口文