條件渲染和列表渲染

一、條件渲染

條件渲染較簡單，使用 JavaScript 操作符 if 或條件運算符來創建表示當前狀態的元素，然后讓 React 根據它們來更新 UI。

貼一個小栗子：

function UserGreeting(props) {

return

歡迎回來!

;

}

function GuestGreeting(props) {

return

請先注冊。

;

}

function Greeting(props) {

const isLoggedIn = props.isLoggedIn;

if (isLoggedIn) {

return ;

}

return ;

}

ReactDOM.render(

// 嘗試修改 isLoggedIn={true}:

,

document.getElementById('example')

);

當然，得益于 jsx 的語法，我們可以用變量來緩存元素或者組件：

function UserGreeting(props) {

return

歡迎回來!

;

}

function GuestGreeting(props) {

return

請先注冊。

;

}

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，不寫運行會報錯

}

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 并不會影響該組件生命周期方法的回調。例如，componentWillUpdate 和 componentDidUpdate 依然可以被調用。

二、列表渲染

列表渲染可以使用 js 中的 .map() 來進行。(map 返回一個經過邏輯處理的新數組)

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 相同，需要給每個列表元素綁定一個 key，便于 React 識別哪些元素發生了變化。

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 會作為給 React 的提示，但不會傳遞給組件，因此，組件并不會知道傳遞給它的 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')

);

對比一下，只是少了聲明?listItems 語句，并把后面的 map() 搬到 jsx 中。

總結

以上是生活随笔為你收集整理的react把表格渲染好ui_react 入坑笔记（五） - 条件渲染和列表渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。