react 入坑笔记(五) - 条件渲染和列表渲染

条件渲染和列表渲染

一、条件渲染

  条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。

  贴一个小栗子:

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 />;
} ReactDOM.render(
// 尝试修改 isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('example')
);

  当然,得益于 jsx 的语法,我们可以用变量来缓存元素或者组件:

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 />;
} function LoginButton(props) {
return (
<button onClick={props.onClick}>
登陆
</button>
);
} function LogoutButton(props) {
return (
<button onClick={props.onClick}>
退出
</button>
);
} 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 = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
} return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
} ReactDOM.render(
<LoginControl />,
document.getElementById('example')
);

  阻止渲染的栗子:

function WarningBanner(props) {
if (!props.warn) {
return null; // 必须写 null,不写运行会报错
} return (
<div className="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 ? '隐藏' : '显示'}
</button>
</div>
);
}
} ReactDOM.render(
<Page />,
document.getElementById('example')
);

注意:组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。例如,componentWillUpdate 和 componentDidUpdate 依然可以被调用。

二、列表渲染

  列表渲染可以使用 js 中的 .map() 来进行。(map 返回一个经过逻辑处理的新数组)

function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
} const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);

  和 vue 相同,需要给每个列表元素绑定一个 key,便于 React 识别哪些元素发生了变化。

function ListItem(props) {
return <li>{props.value}</li>;
} function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
} const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);

注意:key 会作为给 React 的提示,但不会传递给组件,因此,组件并不会知道传递给它的 key。

  在 jsx 中使用 map():

function ListItem(props) {
return <li>{props.value}</li>;
} function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
} const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);

  对比一下,只是少了声明 listItems 语句,并把后面的 map() 搬到 jsx 中。

上一篇:[LeetCode] Sentence Similarity 句子相似度


下一篇:HDU3537-Daizhenyang's Coin(博弈SG-打表)